效果：

思路：

利用多功能浮动运动框架实现微博效果，首先，将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】---JS小功能（JS实现模仿微博发布效果)的更多相关文章

  1. 原生JS+tween.js模仿微博发布效果

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...

  2. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  3. js实现小功能 动态赋值

  4. 常用小功能js函数-函数防抖

    函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...

  5. js/jq 小功能函数

    1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...

  6. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  7. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  8. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  9. js小功能记录

    个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...

随机推荐

  1. HDU 4664 Triangulation（2013多校6 1010题，博弈）

    Triangulation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  2. socket心跳包机制实践与理解

    实现Socket心跳包主要分为两大类,第一采用tcp自带的KeepAlive,第二是自定义心跳包,恰巧我在产品VICA中都使用过,下面就这两种心跳包机制谈谈个人的理解与感受. 首先第一种KeepAli ...

  3. Luci实现框架

    转自:http://www.cnblogs.com/zmkeil/archive/2013/05/14/3078774.html 1.总述 上一篇总结了uhttpd的工作方式,openwrt中利用它作 ...

  4. linux下搭建SVN服务器完全手册

    原文:http://www.cnblogs.com/wrmfw/archive/2011/09/08/2170465.html 系统环境        RHEL5.4最小化安装(关iptables,关 ...

  5. @查看MySQL版本的方法

    1.在终端下:mysql -V. [root@localhost bin]# mysql -V; mysql Ver 14.14 Distrib 5.6.21, for Linux (x86_64) ...

  6. [转]Configure a Package to Use Transactions SSIS

    本文转自:http://msdn.microsoft.com/en-us/library/ms141144.aspx When you configure a package to use trans ...

  7. delphi Align属性

    ---------------------------------------------- -

  8. Struts2中的页面跳转

    内容源自:Struts2中的页面跳转 一.全局页面的设置如果<package>包中的一些action都返回success,并且返回的页面都是同一个JSP页面,这样就可以配置全局的结果页面. ...

  9. Win7 64位 IIS未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项

    未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项.试图加载格式不正 解决方案: 1.需要在IIS里设置,启用32位应用程序我用的是iis7 把启用32位应用程序的fals ...

  10. TestNG 一、 概论

    一. 概论         TestNG,即Testing, NextGeneration,下一代测试技术,是一套根据JUnit 和NUnit思想而构建的利用注释来强化测试功能的一个测试框架,即可以用 ...