点滴积累【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{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>