效果：
思路：
利用多功能浮动运动框架实现微博效果，首先，将textarea中的属性添加到新创建的li里面然后，再将li添加到ul里面，再利用浮动运动框架将数据动态的显示出来。
<head runat="server"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #ul1 { width: 300px; height: 300px; border: 1px solid black; margin: 10px auto; overflow: hidden; } #ul1 li { list-style: none; padding: 4px; border-bottom: 1px #999 dashed; overflow: hidden; opacity: 0; } </style> <script type="text/javascript"> window.onload = function () { var btn = document.getElementById('btn'); var txt = document.getElementById('t1'); var oUl = document.getElementById('ul1'); btn.onclick = function () { var cLi = document.createElement('li'); cLi.innerHTML = txt.value; //将数据添加到li里面 txt.value = ''; if (oUl.children.length > 0) { //判断是否已经有li，如果有那么就插入，如果没有那么就新建 oUl.insertBefore(cLi, oUl.children[0]); } else { oUl.appendChild(cLi); } var iHeight = cLi.offsetHeight; //获得li的高度 cLi.style.height = '0'; move(cLi, { height: iHeight }, function () { //然后利用浮动运动将数据显示出来 move(cLi, { opacity: 100 }); }); } } //------------------------------------------------------------------------------------ //获取非行间样式 function getStyle(ojb, name) { if (ojb.currentStyle) { return ojb.currentStyle[name]; } else { return getComputedStyle(ojb, false)[name]; } } //缓冲运动json的应用 //json{attr,finsh} //json{width:200,height:200} function move(obj, json, fnName) { //obj是对象，Json是对象的属性， fnName是函数 clearInterval(obj.timer); //关闭之前的计时器 obj.timer = setInterval(function () { var timeStop = true; //记录属性是否都已经执行完成 for (var attr in json) { //遍历json中的数据 var oGetStyle = 0; if (attr == 'opacity') { //判断透明度 oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整，然后转换完后赋值 } else { oGetStyle = parseInt(getStyle(obj, attr)); } var speed = (json[attr] - oGetStyle) / 5; //求速度 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整 if (oGetStyle != json[attr]) timeStop = false; if (attr == 'opacity') { //透明度 obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值 obj.style.opacity = (oGetStyle + speed) / 100; } else { obj.style[attr] = oGetStyle + speed + 'px'; //移动div } } if (timeStop) { //如果所有属性都已经执行完成，那么就关闭计时器 clearInterval(obj.timer); if (fnName) { //当关闭计时器后要执行的函数 fnName(); } } }, 30) } //------------------------------------------------------------------------------------ </script> </head> <body> <textarea id="t1"></textarea> <input type="button" id="btn" value="发布" /> <ul id="ul1"> <li style="display: none;"></li> </ul> </body>
