轉載請注明出處:http://www.cnblogs.com/zhangmingze/p/4816865.html
1、先看效果吧，有效果才有動力：
2、html結構：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>模仿微博發布效果</title> 6 <link rel="stylesheet" href="css/index.css" /> 7 </head> 8 <body> 9 <div id="container"> 10 <form action=""> 11 <p class="name-text"> 12 <label>用戶 : <input type="text" id="username" /></label> 13 </p> 14 <textarea id="content"></textarea> 15 <p class="tip"> 16 <span class="left-tip" id="warn">還可以輸入<span id="num">140</span>個字</span> 17 <a href="javascript:void(0);" id="submit">發布</a> 18 </p> 19 </form> 20 <ul id="list"></ul> 21 </div> 22 <script src="js/tween.js"></script> 23 <script src="js/app.js"></script> 24 </body> 25 </html>
2、css樣式這個就不貼了，看圖敲效果，不會可以找我要源碼
3、js部分不復雜，最主要是理解運動過程，運動過程每個運動都可以用這個方法思路，誰用誰知道
1 var sBtn = document.getElementById('submit'); 2 var username = document.getElementById('username'); 3 var content = document.getElementById('content'); 4 var list = document.getElementById('list'); 5 var num = document.getElementById('num'); 7 8 sBtn.onclick=function(){ 9 if(username.value &&content.value){ 10 //創建li節點 11 var li = document.createElement('li'); 12 //本來要用createElement，為了省事，直接用innerHTML 13 li.innerHTML = '<div class="head-img">'+ 14 '<img src="img/1.gif" alt="" />'+'</div>'+ 15 '<div class="user-info">'+'<p class="user-name"><span>'+ 16 username.value+'</span><a href="javascript:void(0);" id="del">刪除</a></p>' 17 +'<p class="text">'+content.value+'</p></div>'; 18 //添加在頭部 19 list.insertBefore(li,list.children[0]); 20 //下面是運動過程，步長，起點，終點，使用定時器 21 var timer = null; 22 var end = li.offsetHeight; 23 var start = 0; 24 var t=0; 25 var maxT=30 26 li.style.height = 0; //初始讓li標簽高度為0，不然高度會初始化，導致閃一下 27 timer = setInterval(function(){ 28 t++; 29 if(t>maxT){ 30 clearInterval(timer); 31 li.style.height = end + 'px'; 32 } 33 //不用tween.js即為線性運動 34 //li.style.height = end/maxT*t + start + 'px'; 35 //碰撞效果，使用tween.js動畫插件 36 li.style.height = Tween.Bounce.easeOut(t,start,end,maxT) + 'px'; 37 },30); 38 39 username.value = content.value = ""; 40 41 var del = document.getElementById('del'); 42 //刪除內容按鈕 43 del.onclick=function(){ 44 var start = li.offsetHeight; //初始的高度 45 var end = 0; //最后高度為0，然后刪除節點 46 var change = end - start; //間隔距離 47 var t=0; 48 var maxT=30; 49 var uptimer = null; 50 uptimer = setInterval(function(){ 51 t++; 52 if(t>=maxT){ 53 clearInterval(uptimer); 54 li.parentNode.removeChild(li); //當高度為0時清除定時器並刪除節點 55 } 56 //同上 57 //li.style.height = change/maxT*t + start + 'px'; 58 //同上 59 li.style.height = Tween.Bounce.easeOut(t,start,change,maxT)+ 'px'; 60 },30); 61 }; 62 } 63 else{ 64 (!username.value)?username.focus():content.focus(); 65 } 66 }; 67 //oninput是html5事件，IE8以上 68 content.oninput=function(){ 69 num.innerHTML = 140 - this.value.length; 70 }; 71 //IE4 - IE10，IE專有，兼容IE 72 content.onpropertychange=function(e){ 73 var e = e||window.event; 74 if(e.propertyName.toLowerCase()=="value"){ 75 num.innerHTML = 140 - this.value.length; 76 } 77 };
這樣就差不多了，tween.js插件比較容易使用，只需要一行代碼
Tween.Bounce(還有其他效果).easeOut(有easeIn,easeInOut)(t,start,change,maxT) //每次步長，開始位置，相隔距離，總步長
tween.js就是貝塞爾曲線啦，樓主只會用，不會貝塞爾曲線
tip：需要源碼的回復找我拿，挺簡單的，不放上來了，樓主新手剛學。