转载请注明出处: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模仿微博发布效果的更多相关文章

  1. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  2. VUE实现微博发布效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 微博发布效果jq版

    大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...

  4. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  5. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

  6. js控住DOM实现发布微博简单效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en&quo ...

  7. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  8. js模仿ios select效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  9. js微博发布框的实现

    观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...

随机推荐

  1. hdu 1576 A/B 拓展欧几里得算法

    A/B Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  2. Psychos in a Line

    Codeforces Round #189 (Div. 1) B:http://codeforces.com/problemset/problem/319/B 题意:每一ROUND如果某个人的数字大于 ...

  3. 窗体前端显示（ShowWindowAsync有许多优点）

    H:=FindWindow('Tfrm_MainForm','aa');  if H>0 then  begin    ShowWindowAsync(h,SW_MAX);    SetFore ...

  4. 常见的Robotium测试的问题总结：

    常见的Robotium测试的问题总结:(从别处拿来的先mark一下) 1.Robotium的 测试类ActivityInstrumentationTestCase2继承了TestCase类,即robo ...

  5. SPOJ-COT-Count on a tree(树上路径第K小，可持久化线段树)

    题意: 求树上A,B两点路径上第K小的数 分析: 同样是可持久化线段树,只是这一次我们用它来维护树上的信息. 我们之前已经知道,可持久化线段树实际上是维护的一个前缀和,而前缀和不一定要出现在一个线性表 ...

  6. 网络流CodeForces. Original 589F：Gourmet and Banquet

    A gourmet came into the banquet hall, where the cooks suggested n dishes for guests. The gourmet kno ...

  7. 原生javascript难点总结(1)---面向对象分析以及带来的思考

    ------*本文默认读者已有面向对象语言(OOP)的基础*------ 我们都知道在面向对象语言有三个基本特征 :  封装 ,继承 ,多态.而js初学者一般会觉得js同其他类C语言一样,有类似于Cl ...

  8. Nova 无法向虚机注入密钥

    欢迎各位关注我的博客:http://weibo.com/u/216633637 废话开头: 之前参考这位同学的博客http://www.cnblogs.com/awy-blog/p/3447176.h ...

  9. [Java] Java IO Files

    Files 使用 FileInputStream 或 FileReader 可以用于读入文件,前者基于二进制,后者基于文本.使用它们不需要读取整个文件,但是只能按照它们存储的顺序,依次读取字节,或字符 ...

  10. OpenCV 中 IplImage、CvMat、Mat中的type是怎么回事？

    在使用opencv的过程中,无论使用原始的IplImage和CvMat类型,还是用最新C++版本的Mat类型,在创建和使用过程中,经常会遇到CV_8UC1.CV_8UC3.CV_32FC3等声明,我以 ...