效果：

思路：

利用多功能浮动运动框架实现微博效果，首先，将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. UltraISO（软碟通）制作安装Ubuntu系统的U盘安装盘

    1.开UltraISO(软碟通),加载要写入U盘的iso文件,注意,要求软碟通的版本是9.3以上的.如下图: 2.点击“启动光盘.写入硬盘映像: 3.开启个写入硬盘映像的窗口,硬盘驱动器那一项看清楚是 ...

  2. jquery滚动条插件nanoscroller的应用

    默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款jQuery 插件nanoscroller ,可以自定义滚动条的样式. 应用: 1.引入样式 nanoscroller.css <link ...

  3. 深入C（关键字）

    C语言标准定义的32个关键字 关键字 意 义 auto 声明自动变量,缺省时编译器一般默认为auto int 声明整型变量 double 声明双精度变量 long 声明长整型变量 char 声明字符型 ...

  4. Windows系统下将目录挂载为一个磁盘并分配盘符

    Windows系统下subst可以临时将目录分配一个盘符. 将路径与驱动器号关联. SUBST [drive1: [drive2:]path]SUBST drive1: /D drive1: 指定要分 ...

  5. Linux中线程使用详解

    线程与进程为什么有了进程的概念后,还要再引入线程呢?使用多线程到底有哪些好处?什么的系统应该选用多线程?我们首先必须回答这些问题. 使用多线程的理由之一是和进程相比,它是一种非常"节俭&qu ...

  6. Nodejs全站开发学习系列 & 深入浅出Node学习笔记 & Spider抓取

    https://course.tianmaying.com/node 这个系列的文章看起来很不错,值得学习一下. /Users/baidu/Documents/Data/Interview/Web-S ...

  7. 页面优化——js异步载入

    同步载入 在介绍js异步载入之前.我们先来看看什么是js同步载入.我们平时最常使用的就是这样的同步载入形式: <script src="http://XXX.com/script.js ...

  8. (六)SSO之CAS框架扩展 改动CAS源代码实现与ESS动态password验证对接

    题记: 偶尔的偶尔我们会听到这个站点的数据泄露了,那个站点的用户数据泄露了.让用户又一次改动登录password,所以,对于用户数据安全性越发的引起我们的重视了,尤其是一些保密性要求高的站点.更须要添 ...

  9. 职场二年级转型C++的困惑

    [来信] 老师.你好.看了你的博客和採訪.不由主自地给你发私信,感觉你能解答我的问题. 学生90后,2012年毕业于某不知名院校.两年工作经验(第一年C#,第二年java,直到如今),一直想转型C++ ...

  10. CSS学习（九）-CSS背景

    一.理论: 1.background-break  a.bounding-box 背景图像在整个内联元素中进行平铺 b.each-box 背景图像在行内中进行平铺 c.continuous 下一行的背 ...