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

 <!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. 在Heroku部署时，无法加载 css，js，图片资源解决办法

    解决方案: 首先查看Gemfile, 确保group :production do 里添加了 gem "rails_12factor", '0.0.2' 然后在本地执行 rails ...

  2. python FileError

    >>> ls1=["nihia"] >>> ls1 ['nihia'] >>> ls1.pop() 'nihia' >& ...

  3. 关于NotePad一些功能的实现方法

    NotePad功能:1.向上查找,大小写,全字匹配,利用CFindDlg的基类的成员函数实现:switch casePreTranslateMessage()函数http://blog.sina.co ...

  4. Spark集群部署

    Spark是通用的基于内存计算的大数据框架,可以和hadoop生态系统很好的兼容,以下来部署Spark集群 集群环境:3节点 Master:bigdata1 Slaves:bigdata2,bigda ...

  5. UVALive 4849 String Phone（2-sat、01染色）

    题目一眼看去以为是4-sat... 题意:给n(n<=3000)个黑方块的坐标,保证黑方块没有公共边.对于每个黑方块选一个角作为结点,使得所选结点满足输入的一个无向图.其中距离为曼哈顿距离.输出 ...

  6. Android -- ActionBar上的三点菜单显示不出来问题

    把Theme设置为Theme.AppCompat.Light.DarkActionBar,ActionBar上的三点菜单就是显示不出来,最终找到了一种解决办法:http://blog.csdn.net ...

  7. 自动换行 lable换行 div换行 span换行 label换行

    label  word-break: break-all; white-space: normal;

  8. 网络知识学习2---（IP地址、子网掩码）（学习还不深入，待完善）

    紧接着:网络知识学习1 1.IP地址    IP包头的结构如图 A.B.C网络类别的IP地址范围(图表) A.B.C不同的分配网络数和主机的方式(A是前8个IP地址代表网络,后24个代表主机:B是16 ...

  9. [MongoDB]MongoDB与JAVA结合使用CRUD

    汇总: 1. [MongoDB]安装MongoDB2. [MongoDB]Mongo基本使用:3. [MongoDB]MongoDB的优缺点及与关系型数据库的比较4. [MongoDB]MongoDB ...

  10. python处理地理数据-geopandas和pyshp

    这边博客并不是有关geopandas的教程和pyshp的教程! 使用python来处理地理数据有很多相关的包,最近研究需要处理一些地理数据,然而arcgis的arcpy总是不能令人满意.所以这里说说p ...