原生JS+tween.js模仿微博发布效果
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html
1、先看效果吧，有效果才有动力：
2、html结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模仿微博发布效果</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="container">
<form action="">
<p class="name-text">
<label>用户 : <input type="text" id="username" /></label>
</p>
<textarea id="content"></textarea>
<p class="tip">
<span class="left-tip" id="warn">还可以输入<span id="num">140</span>个字</span>
<a href="javascript:void(0);" id="submit">发布</a>
</p>
</form>
<ul id="list"></ul>
</div>
<script src="js/tween.js"></script>
<script src="js/app.js"></script>
</body>
</html>
2、css样式这个就不贴了，看图敲效果，不会可以找我要源码
3、js部分不复杂，最主要是理解运动过程，运动过程每个运动都可以用这个方法思路，谁用谁知道
var sBtn = document.getElementById('submit');
var username = document.getElementById('username');
var content = document.getElementById('content');
var list = document.getElementById('list');
var num = document.getElementById('num');
sBtn.onclick=function(){
if(username.value &&content.value){
//创建li节点
var li = document.createElement('li');
//本来要用createElement，为了省事，直接用innerHTML
li.innerHTML = '<div class="head-img">'+
'<img src="img/1.gif" alt="" />'+'</div>'+
'<div class="user-info">'+'<p class="user-name"><span>'+
username.value+'</span><a href="javascript:void(0);" id="del">删除</a></p>'
+'<p class="text">'+content.value+'</p></div>';
//添加在头部
list.insertBefore(li,list.children[0]);
//下面是运动过程，步长，起点，终点，使用定时器
var timer = null;
var end = li.offsetHeight;
var start = 0;
var t=0;
var maxT=30
li.style.height = 0; //初始让li标签高度为0，不然高度会初始化，导致闪一下
timer = setInterval(function(){
t++;
if(t>maxT){
clearInterval(timer);
li.style.height = end + 'px';
}
//不用tween.js即为线性运动
//li.style.height = end/maxT*t + start + 'px';
//碰撞效果，使用tween.js动画插件
li.style.height = Tween.Bounce.easeOut(t,start,end,maxT) + 'px';
},30);
username.value = content.value = "";
var del = document.getElementById('del');
//删除内容按钮
del.onclick=function(){
var start = li.offsetHeight; //初始的高度
var end = 0; //最后高度为0，然后删除节点
var change = end - start; //间隔距离
var t=0;
var maxT=30;
var uptimer = null;
uptimer = setInterval(function(){
t++;
if(t>=maxT){
clearInterval(uptimer);
li.parentNode.removeChild(li); //当高度为0时清除定时器并删除节点
}
//同上
//li.style.height = change/maxT*t + start + 'px';
//同上
li.style.height = Tween.Bounce.easeOut(t,start,change,maxT)+ 'px';
},30);
};
}
else{
(!username.value)?username.focus():content.focus();
}
};
//oninput是html5事件，IE8以上
content.oninput=function(){
num.innerHTML = 140 - this.value.length;
};
//IE4 - IE10，IE专有，兼容IE
content.onpropertychange=function(e){
var e = e||window.event;
if(e.propertyName.toLowerCase()=="value"){
num.innerHTML = 140 - this.value.length;
}
};
这样就差不多了，tween.js插件比较容易使用，只需要一行代码
Tween.Bounce(还有其他效果).easeOut(有easeIn,easeInOut)(t,start,change,maxT) //每次步长，开始位置，相隔距离，总步长
tween.js就是贝塞尔曲线啦，楼主只会用，不会贝塞尔曲线
tip：需要源码的回复找我拿，挺简单的，不放上来了，楼主新手刚学。
原生JS+tween.js模仿微博发布效果的更多相关文章
- 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- VUE实现微博发布效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 微博发布效果jq版
大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...
- JS学习笔记 - 微博发布效果
<script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...
- window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果
window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...
- js控住DOM实现发布微博简单效果
这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en&quo ...
- 原生JavaScript 全特效微博发布面板效果实现
javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...
- js模仿ios select效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
- js微博发布框的实现
观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...
随机推荐
- [BZOJ 1011] [HNOI2008] 遥远的行星 【近似解】
题目链接: BZOJ - 1011 题目分析 这道题的特别之处在于,答案可以有5%的误差. 嗯..So? 我还是不会,于是看题解. 神犇的题解就是利用这误差范围求一个近似解. 怎么求近似解呢?假如 g ...
- Java学习IO篇
来吧,同志们,为复习网络编程做准备-- 一.理论准备 流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以"流" ...
- iPhone手机VPN设置
如果iPhone,iPad游戏或软件服务器在国外不能用,就需要设置VPN了. 如果是为了解除公司上网策略限制,或者为了上Google,Facebook,都可以通过设置VPN实现. 要使用VPN需要到V ...
- Git标签管理
一般我们发布一个新版本到线上服务器时都会在版本库中打一个标签,这时就确定了某个版本将发布到线上.我们可以随时可以查看这个打标签的版本,也就 是说标签其实呢,就是版本库中一个快照.简单说标签就是指向某个 ...
- 【CF】509E Pretty Song
数学规律题,很容易计算的.以初始测试数据3为例.Str Y I S V O W E L--------------------------Len 1 2 3 4 | 5 6 7 8Y ...
- Unity 利用Coroutine实现跳动数字效果
纯粹转载:转载注明参考链接! 参考链接:http://xataxnova.blog.163.com/blog/static/236620063201451061738122/,作者:网易博客 xata ...
- Solr4.4的安装与配置
最近准备用Solr搭建项目,所以对其作了一些了解,我采用的是Solr4.4版本:这个版本的Solr相对于以前的版本改变很大,这里记一下自己安装与配置的过程. 网上很多关于Solr的教程都很老了,很多教 ...
- Google Map API 学习三
- Spoj 7001 Visible Lattice Points 莫比乌斯,分块
题目:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=37193 Visible Lattice Points Time L ...
- 了解开源的许可证GPL、LGPL、BSD、Apache 2.0的区别 【转】
原文来自:http://blog.sina.com.cn/s/blog_6870d1e00100lhlv.html 你对开源有多少了解呢?如果你是软件开发者,要开源软件,不单单是开放源代码就可以了,选 ...