点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)
效果：
思路：
利用多功能浮动运动框架实现微博效果，首先，将textarea中的属性添加到新创建的li里面然后，再将li添加到ul里面，再利用浮动运动框架将数据动态的显示出来。
代码：
1 <head runat="server"> 2 <title></title> 3 <style type="text/css"> 4 * 5 { 6 margin: 0; 7 padding: 0; 8 } 9 #ul1 10 { 11 width: 300px; 12 height: 300px; 13 border: 1px solid black; 14 margin: 10px auto; 15 overflow: hidden; 16 } 17 #ul1 li 18 { 19 list-style: none; 20 padding: 4px; 21 border-bottom: 1px #999 dashed; 22 overflow: hidden; 23 opacity: 0; 24 } 25 </style> 26 <script type="text/javascript"> 27 window.onload = function () { 28 var btn = document.getElementById('btn'); 29 var txt = document.getElementById('t1'); 30 var oUl = document.getElementById('ul1'); 31 btn.onclick = function () { 32 var cLi = document.createElement('li'); 33 cLi.innerHTML = txt.value; //将数据添加到li里面 34 txt.value = ''; 35 if (oUl.children.length > 0) { //判断是否已经有li，如果有那么就插入，如果没有那么就新建 36 oUl.insertBefore(cLi, oUl.children[0]); 37 } else { 38 oUl.appendChild(cLi); 39 } 40 var iHeight = cLi.offsetHeight; //获得li的高度 41 cLi.style.height = '0'; 42 move(cLi, { height: iHeight }, function () { //然后利用浮动运动将数据显示出来 43 move(cLi, { opacity: 100 }); 44 }); 45 } 46 } 47 //------------------------------------------------------------------------------------ 48 //获取非行间样式 49 function getStyle(ojb, name) { 50 if (ojb.currentStyle) { 51 return ojb.currentStyle[name]; 52 } 53 else { 54 return getComputedStyle(ojb, false)[name]; 55 } 56 } 57 //缓冲运动json的应用 58 //json{attr,finsh} 59 //json{width:200,height:200} 60 function move(obj, json, fnName) { //obj是对象，Json是对象的属性， fnName是函数 61 clearInterval(obj.timer); //关闭之前的计时器 62 obj.timer = setInterval(function () { 63 var timeStop = true; //记录属性是否都已经执行完成 64 for (var attr in json) { //遍历json中的数据 65 var oGetStyle = 0; 66 if (attr == 'opacity') { //判断透明度 67 oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整，然后转换完后赋值 68 } 69 else { 70 oGetStyle = parseInt(getStyle(obj, attr)); 71 } 72 var speed = (json[attr] - oGetStyle) / 5; //求速度 73 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整 74 if (oGetStyle != json[attr]) 75 timeStop = false; 76 if (attr == 'opacity') { //透明度 77 obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值 78 obj.style.opacity = (oGetStyle + speed) / 100; 79 } 80 else { 81 obj.style[attr] = oGetStyle + speed + 'px'; //移动div 82 } 83 } 84 if (timeStop) { //如果所有属性都已经执行完成，那么就关闭计时器 85 clearInterval(obj.timer); 86 if (fnName) { //当关闭计时器后要执行的函数 87 fnName(); 88 } 89 } 90 }, 30) 91 } 92 //------------------------------------------------------------------------------------ 93 </script> 94 </head> 95 <body> 96 <textarea id="t1"></textarea> 97 <input type="button" id="btn" value="发布" /> 98 <ul id="ul1"> 99 <li style="display: none;"></li> 100 </ul> 101 </body>
