模仿新浪博客首页的，最新评论：

 <!DOCTYPE HTML>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

         *{margin:0; padding: 0;}

         #ul1{width: 300px; height: 300px; border:1px solid #000; margin:0 auto;}

         #ul1 div{list-style: none; border-bottom:1px dashed #000;padding: 2px;overflow: hidden;filter:alpha(opacity:0);opacity: 0;}

         </style>

         <script type="text/javascript" src="move.js"></script>

         <script type="text/javascript">

         window.onload = function(){

             var oArea = document.getElementById("area");

             var oBtn = document.getElementById("btn1");

             var oUl = document.getElementById("ul1");

             oBtn.onclick = function(){

                 var oLi = document.createElement("div");//创建内部Div

                 var aLi = oUl.getElementsByTagName('div');

                 oLi.innerHTML = oArea.value;

                 oArea.value = "";//点击发布后清空textarea

                 if(aLi.length){//如果内部已经有评论，那么就插入在第一个，否则就直接放在大的Div中

                     oUl.insertBefore(oLi,aLi[0]);

                 }else{

                     oUl.appendChild(oLi);

                 }

                 var iHeight = oLi.offsetHeight;//计算回复Div的高

                 oLi.style.height = 0;//将Div的高设置为0，完成下面的动画

                 startMove(oLi,{height:iHeight},function(){

                     startMove(oLi,{opacity:100});

                 });

             }

         };

  function startMove(obj,json,fn){

     clearInterval(obj.timer);

     obj.timer = setInterval(function(){

         for(var attr in json){

             var iCur = 0;

             if(attr == "opacity"){

                 iCur = parseInt(parseFloat(getStyle(obj,attr))*100);

             }else{

                 iCur = parseFloat(getStyle(obj,attr));

             }

             var iSpeed = (json[attr]-iCur)/8;

             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) :Math.floor(iSpeed);

             if(json[attr] == iCur){

                 clearInterval(obj.timer);

                 if(fn){

                     fn();

                 }

             }else{

                 if(attr == "opacity"){

                     obj.style.filter = 'filter:alpha(opacity:'+(iCur+iSpeed)+')';

                     obj.style.opacity = (iCur+iSpeed)/100;

                 }else{

                     obj.style[attr] = iCur+iSpeed+"px";

                 }

             }

         }

     },30);

 }

 function getStyle(obj,attr){

     if(obj.currentStyle){

         return obj.currentStyle[attr];

     }else{

         return getComputedStyle(obj,false)[attr];

     }

 }

         </script>

     </head>

     <body>

         <textarea rows="10" cols="40" id="area"></textarea>

         <input type="button" value="发布" id="btn1">

         <div id="ul1">

         </div>

     </body>

 </html>

菜鸟一个，大神路过就Ok了~~~

javascript学习之运动框架的更多相关文章

  1. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  2. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  3. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  4. Javascript之链式运动框架1

    第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...

  5. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  6. javaScript学习（4）框架学习

    javaScript学习4 1.框架 在一个普通HTML文档载入浏览器的同时还创建了一个模型,这个模型始于一个window对象和它包含的文档.单框架窗口和文档很很简单,window下就是documen ...

  7. JavaScript的运动框架学习总结

    一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...

  8. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. javascript中的动画的实现以及运动框架的编写（1）

    大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形d ...

随机推荐

  1. Coursera系列-R Programming第二周

    博客总目录,记录学习R与数据分析的一切:http://www.cnblogs.com/weibaar/p/4507801.html  --- 好久没发博客 且容我大吼一句 终于做完这周R Progra ...

  2. WP8.1 RT 生命周期详解‏‏‏‏‏‏‏‏‏‏‏‏‏

                应用状态关系转换图 根据此“应用状态关系转换图”.有以下: 三个状态: NotRunning:未运行    Running:运行中   Suspended:挂起 三个事件: A ...

  3. Node.js入门学习笔记（二）

    函数传递 举例来说,你可以这样做: function say(word) {      console.log(word);  }  function execute(someFunction, va ...

  4. C和指针 第十二章 结构体 整体赋值 error: expected expression

    定义结构体后整体赋值时发生错误 typedef struct NODE { struct NODE *fwd; struct NODE *bwd; int value; } Node; //声明变量 ...

  5. 进阶系列三【绝对干货】----Log4.Net的介绍

    一.介绍 当我们开发软件时,一般都会加入运行期的跟踪手段,以方便后续故障分析和Bug调试..net framework本身提供了一个System.Diagnostics.Trace类来实现流程跟踪功能 ...

  6. Java 8之二小坑：stream parallel 和 lamada

    Stream:parallel乱序 Java 8 stream流为处理集合时非常方便.遇到的一个坑是为了提高在多核cpu下的性能,尝试了parallel().数据源是HashSet的,在做分割的时候发 ...

  7. 未备案域名打开国内服务器上的网站（绑定国外空间并判断url后跳转引用）

    场景:由于域名没备案不能绑定国内服务器,通过先绑定国外空间,在空间着陆页判断当前url,打开不同的页面.页面上通过iframe引用国内服务器上的目标网站. 实现:未备案域名打开国内服务器上的网站. 国 ...

  8. 安装KB3132372补丁后，WIN10中IE内核加载flash崩溃

    今天(2015年12月30日)突然很多人反馈在WIN10上IE内核的PC端应用崩溃.经过一番查找,最终定位到问题.WIN10今天发布了新的补丁KB3132372,64位系统更新该补丁后,打开IE内核的 ...

  9. JdbcTemplate中queryForObject的EmptyResultDataAccessException问题

    在使用Spring提供的JdbcTemplate中名为queryForObject API进行数据库查询时有时会抛出如下异常提示息,org.springframework.dao.EmptyResul ...

  10. PHP 面向对象

    封装与不封装的区别:   未封装 时 外部随意更改数据   数据 不需要判定 就可以执行    外部直接操作数据 封装:  外部同样可以对数据更改,但需要 调用  类里面的  函数  外部间接操作数据 ...