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

 <!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. C和指针 第五章 逻辑位移与算术位移

    对于操作数的左位移都是相同的,右边空出来的位置用0补齐. 但是对于右位移,对于有符号和无符号数是不一样的,最高位的1有两种处理方式.逻辑位移和算术位移. 逻辑位移:右移入位用0补齐 算术位移:右移入位 ...

  2. exception catch doesn't work?? (python 3)

    exception catch doesn't work?? (python 3) except u.URLError, e: ^ SyntaxError: invalid syntax in Pyt ...

  3. webApi 数据绑定 获取

    直接上代码: <html> <head> <meta name="viewport" content="width=device-width ...

  4. sscanf提取字符串中的数据php

    1.需求 理解sscanf的作用 2.例子 $str = "age:30 weight:60kg"; sscanf($str,"age:%d weight:%dkg&qu ...

  5. 利用js刷新页面方法

    1,reload 方法,该方法强迫浏览器刷新当前页面. location.reload(force) 如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-S ...

  6. struts2 自定义校验规则

    自定义校验规则:(了解) 在Struts2自定义校验规则: 1.实现一个Validator 接口. 2.一般开发中继承ValidatorSupport 或者 FieldValidatorSupport ...

  7. React-native 学习记录

    在此记录下学习中的小知识 今天在componentWillUpdate调用this.setState方法,想达到一个效果:就像viewWillAppear时,系统从网络请求新的数据,并刷新界面, 但是 ...

  8. windows7 启用管理员账户

    在虚拟机中安装了windows7,方便使用qq,使用百度云,office等常用的软件.虚拟机使用的oracle的VirtualBox,个人使用体验不错,最棒的功能是能将物理机中的磁盘映射到虚拟机中网络 ...

  9. resultMap 映射

    1. sql的重用:定义一个sql片段,可在任何SQL语句中重用该片段. <sql id="personColumns"> name, sex, updateTime& ...

  10. SQLite -- 分页查询

    原文:http://blog.csdn.net/lu1024188315/article/details/51734514 参考:http://www.runoob.com/sqlite/sqlite ...