效果：

思路：

利用多功能浮动运动框架实现微博效果，首先，将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. Win32 error code message

    http://fit.c2.com/fit/files/LispPlatform/lisp/clisp-2.28/src/errwin32.d # Calls a function, passing ...

  2. VS2010 C++ 创建COM组件

    1.项目中要使用到com组件,于是了解了一下com,并根据<C#高级编程>中关于com的介绍用vs创建了一下com,用于实验.以下均根据书中的demo做一遍,熟悉一下而已. 2.创建CoM ...

  3. 从connect到express02-中间件morgan

    控制台输出请求日志 输出格式 默认格式: dev, combined, tiny等 自定义格式: morgan(':method :url :status :res[content-length] - ...

  4. TDiocpCoderTcpServer 使用

    TDiocpCoderTcpServer 使用 uses diocp_coder_tcpServer,utils_zipTools,diocp_tcp_server,diocp_task // 创建T ...

  5. Android 自己收集的开源项目集合（持续更新 2018.2.5）

    2017.12.21 1.仿QQ说说发图片选择框架 https://github.com/yaozs/ImageShowPicker 2.炫酷开屏动画框架 https://github.com/Jos ...

  6. 一、Instrument之Core Animation工具

    一.Instrument 三个方法: (1).按下Command + I打开Instrument; (2).Xcode->product->profile; (3).Xcode->O ...

  7. 为TextView设置两种状态，程序中可以动态切换

    经常会需要用文字的两种状态来表示当前系统的某两种状态.比如:         这里的第一个TextView和后两个TextView就表示了两种状态.我们可以在程序的动态的切换状态(而不是直接修改颜色) ...

  8. DevExpress控件使用小结

    摘自: http://blog.sina.com.cn/s/blog_95cfa64601019wex.html .TextEditor(barEditItem)取文本 string editValu ...

  9. C# this.Hide()

    C# this.Hide() 第一次用的时候是在_Load函数里: BookSystem bs = new BookSystem();             bs.ShowDialog();     ...

  10. Android的四大天王

    Android 四大天王 1.Activity  2.Intent Receiver 3.Service 4.Content Provider   但是,并不是每一个Android应用程序都需要这四种 ...