效果：

思路：

利用多功能浮动运动框架实现微博效果，首先，将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. 《ArcGIS Runtime SDK for Android开发笔记》——（5）、基于Android Studio构建ArcGIS Android开发环境（离线部署）（转）

    1.前言 在上一篇的内容里我们介绍了基于Android Studio构建ArcGIS Runtime SDK for Android开发环境的基本流程,流程中我们采用的是基于Gradle的构建方式,在 ...

  2. springBoot单元测试-基础单元测试

    1)在pom文件中加入junit支持 <!-- spring-boot-starter-test 单元测试 --> <dependency> <groupId>or ...

  3. Code Review： 超越“审、查、评”的代码回顾

    http://news.cnblogs.com/n/532148/ 文/TWInsights-伍斌 Code Review 应该是软件开发团队“共同学习.识别模式和每日持续”的过程,而不是带有“审.查 ...

  4. fmri 分析数据 fsl & spm 两大平台比对

    基于下面这份ppt:Comparing SPM and FSL, by lChris Rorden fsl & spm都是免费的,都很受欢迎.spm更受欢迎. 两者的区别在于何时利用norma ...

  5. 版本控制SVN的使用笔记

    安装 客户端和服务端下载地址,打开网址,根据自己的操作系统下载对应的版本,window用户服务端一般安装的是VisualSVN,客户端安装TortoiseSVN,在实际工作中,我们一般只需要安装Tor ...

  6. iOS:在OC中调用JS脚本

    示例一:在webView中调用js脚本进行搜索 1.首先导入JavaScriptCore.framework这个框架 2.创建webView.设置代理.请求手机端百度 #import "Vi ...

  7. MongoDB分片集群常用操作

    下架主节点: db.adminCommand({replSetStepDown : 1, force : true}) 删除节点: rs.remove("IP:PORT") 新增节 ...

  8. vs2017 自定义生成规则 错误 MSB3721 命令 ”已退出，返回代码为 1。

    错误 MSB3721 命令 ”已退出,返回代码为 1. 解决办法:去掉yasm复选框,改为masm vs2017 自定义生成规则-编译汇编代码 VC++调用yasm编译汇编代码有三种方法:Custom ...

  9. TestNG 八 并发测试

    一. Concurrenttesting: 下面的例子是输出进程ID,threadPoolSize用来指明线程池的大小,也就是并发的线程数目是多少 5次调用,有3个线程可调用 @Test(invoca ...

  10. 不用一个判断，用JS直接输出勾股数

    说明: 这里勾股数是符合a2+b2=c2的整数,比如32+42=52,52+122=132,怎么把符合条件的勾股数找出来呢?用代数替代的方法可以极大简化程序,直至一个判断都不用. 可以设a=m2-n2 ...