<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿新浪微博消息发布功能</title> <style> *{margin: 0; padding: 0;} #div1{width: 400px; height: 400px; border: 1px solid; margin:10px auto; position: relative;overflow: hidden;} #ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none;filter: alpha(opacity:0); opacity: 0;} </style> <script src="https://www.jb51.net/js/chuan.js"></script> </head> <body> <textarea rows="5" cols="30"value=""></textarea> <input type="button" value="发布" /> <div> <ul></ul> </div> <script> var oUl=document.getElementById('ul1'); var oTxt1=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { var oLi=document.createElement('li'); oLi.innerHTML=oTxt1.value; oTxt1.value=''; if(oUl.children.length>0) { oUl.insertBefore(oLi,oUl.children[0]); } else { oUl.appendChild(oLi); } var iHeight=oLi.offsetHeight; oLi.style.height=0; move(oLi,{height:iHeight},function() { move(oLi,{opacity:100}); }); } </script> </body> </html>
chuan,js为之前写的完美运动框架：
function getstyle(obj,name) { if(obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj,false)[name]; } } function move(obj,json,fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function() { var bBox=true;//假设所有值都已经到了 for(var strr in json) { if(strr=='opacity') { var cur=Math.round(parseFloat(getstyle(obj,strr))*100); } else { var cur=parseInt(getstyle(obj,strr)); } var speed=(json[strr]-cur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[strr]) bBox=false; if(strr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed+')'); obj.style.opacity=(cur+speed)/100; } else { obj.style[strr]=cur+speed+'px'; } } if(bBox) { clearInterval(obj.timer); if(fnEnd)fnEnd(); } },30); };