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

 <!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++ 修饰名的格式探究

    以下结果是由VS2010里面测试得出: ------------------------------------------------------------------ /* 函数名.类名.名称空 ...

  2. POJ2914 （未解决）无向图最小割|Stoer-Wagner算法|模板

    还不是很懂,贴两篇学习的博客: http://www.hankcs.com/program/algorithm/poj-2914-minimum-cut.html http://blog.sina.c ...

  3. jquery 用attr修改src 淡入淡出

    $("#wanwan").animate({ opacity: 'toggle' }, "slow", null, function () { $(" ...

  4. ASP.NET获取客户端的相关信息

    /// <summary>        /// 获取远程浏览器端 IP 地址        /// </summary>        /// <returns> ...

  5. MQTT（二）推送

    MQTT V3.1----publish解读 - leeying - 博客园 http://www.cnblogs.com/leeying/p/3791341.html MQTT - 聂永的博客 - ...

  6. 示例开发过程记录：meteor,react,apollo

    本示例记录一个开发过程: 1)参考 Meteor React TUTORIAL教程 https://www.meteor.com/tutorials/react/creating-an-app 2). ...

  7. Java实现JDBC连接数据库实例

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  8. css3部分选择器整理

    整理些选择器,加深印象和理解 标签选择器 body{} 表示body标签 类选择器 .className{} 表示类名class为className的所有标签 id选择器 #idName{} 表示id ...

  9. MVC4.0

    --后台ajax传值 <script type="text/javascript">     $(document).ready(function dianZan(id ...

  10. could not insert new action connection could not find any information for the class named

    玩代码的时候遇到一问题,用的 storyboard 的时候分页不能自动获取到类,Automatic 里是空的,然后自动选到该类下的时候控件貌似可以拖过去,但是当 cennect 的时候会报错:“cou ...