JS实现模仿微博发布效果实例代码

思路:

利用多功能浮动运动框架实现微博效果,首先,将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>

你可能感兴趣的:(js,border,hidden,black)