转载请注明出处: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. 下一代hadoop

    1,hadoop 2.0 产生背景2,hadoop 2.0 基本构成3,HDFS 2.04 YARN5 MapReduce On YARN6 Hadoop 2.0初体验7 总结 1,hadoop 2. ...

  2. 内存管理tcmalloc

    tcmalloc https://code.google.com/p/gperftools/

  3. jQuery中的data方法:

    向元素附加数据,然后取回该数据: $("#btn1").click(function(){ $("div").data("greeting" ...

  4. xcode5时代如何设置Architectures和Valid Architectures

    目前ios的指令集有以下几种: 1,armv6,支持的机器iPhone,iPhone2,iPhone3G及对应的iTouch 2,armv7,支持的机器iPhone4,iPhone4S 3,armv7 ...

  5. xcode 环境，多工程联编设置【转】

    http://blog.csdn.net/vienna_zj/article/details/8467522 一.xcode4中的环境变量 $(BUILT_PRODUCTS_DIR) build成功后 ...

  6. 【HTTP】Speed and Mobility: An Approach for HTTP 2.0 to Make Mobile Apps and the Web Faster

    This week begins face to face meetings at the IETF on how to approach HTTP 2.0 and improve the Inter ...

  7. 在前台运行Service

    一个前台的 service是被用户强烈关注的从而不会在内存低时被系统杀死．前台 service必须在状态栏上提供一个通知,这个通知被放在＂正在进行＂区域中,这表示这个通知不能被解除,除非服务停止了或者 ...

  8. C#针对DataTable进行分页方法

    以下的分页方法是针对数据量不是非常大的数据进行的,是在内存中进行的分页操作. /// <summary> /// DataTable分页 /// </summary> /// ...

  9. Unity3d 屏幕空间人体皮肤知觉渲染&次表面散射Screen-Space Perceptual Rendering & Subsurface Scattering of Human Skin

    之前的人皮渲染相关 前篇1:unity3d Human skin real time rendering 真实模拟人皮实时渲染 前篇2:unity3d Human skin real time ren ...

  10. 关于将客户端移植到Lua的解决方案设想。

    现在发行商都需要cp们做热更新,而对于unity制作的游戏来讲,这个恐怕是个噩梦,而项目已经进行到中后期,确实很麻烦,有UniLua,但是如果全部手动解决恐怕上不了线了工作量太大,初步设想如果做一个基 ...