效果：

思路：

利用多功能浮动运动框架实现微博效果，首先，将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. CentOS 6.9关闭NetworkManager服务

    说明:安装了图形界面init5级别的系统会自动安装NetworkManager进行网络管理.这东西有点难搞,所以可以把它禁掉. 配置: #停止NetworkManager service Networ ...

  2. centos下防火墙iptables日志学习笔记

    一直找不到日志方面怎么弄,问了同事,同事给了个网址: http://www.thegeekstuff.com/2012/08/iptables-log-packets/ 下面就是我根据这个网址里面的设 ...

  3. NTP安全漏洞公告

        NTP服务今天公告了几个高危漏洞,大概信息如下: 描述:包含缓冲区溢出等多个高危或低危漏洞. 危害:可以利用获取服务器权限完全控制服务器,至少可以造成服务器崩溃. 影响范围:只有升级到4.2. ...

  4. jQuery中的Ajax全局事件

    Ajax全局事件 全局事件会在有ajax请求的情况下触发. 方法名称 说明 ajaxStart(callback) Ajax请求开始时执行的函数 ajaxStop(callback) Ajax请求结束 ...

  5. C,C++开源项目中的100个Bugs

    俄罗斯OOO Program Verification Systems公司用自己的静态源码分析产品PVS-Studio对一些知名的C/C++开源项目,诸如Apache Http Server.Chro ...

  6. 万里长征第二步——django个人博客（第二步 ——日志记录器）

    定义日志记录器 可以在setting.py里设置日志记录器 # 自定义日志输出信息 LOGGING = { 'version': 1, 'disable_existing_loggers': True ...

  7. Mac系统使用VS Code编译Bootstrap 4

    环境: macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 Bootstrap3为我们提供了在线编译工具,可 ...

  8. VMware Workstation 重启服务脚本 解决连不上ssh问题

    解决虚拟机,每次启动连不上ssh问题,需要关闭虚拟机,再执行脚本.执行完后,再启动虚拟机就可以连上ssh啦! 脚本名称:vmware_server_restart.bat (请以管理员身份运行,否则可 ...

  9. python 实现简单的感知机

    最近在自学机器学习,记录下一些学习记录 如何用python实现一个简单的感知机 需要安装numpy库,即下面用到的np 简单的说就是 通过计算权重向量w和输入向量x的线性组合,判断该线性组合是否大于某 ...

  10. win8.1 64位环境搭建android开发环境

    1.下载JDK,http://www.oracle.com/technetwork/java/javase/downloads/index.html,选择版本 2.安装刚刚下载的JDK 3.环境变量配 ...