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

 <!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. Go - 路径、目录名、包名、文件名

    先看一个示例: 1.目录结构 bin pkg src pk1 pk2 function1.go function2.go index.go 2.function1.go 文件内容: package p ...

  2. 报错mongoose.connection.db.collectionnames is not a function

    mongoose.connection.db.collectionNames方法已经无效 建议使用mongoose.connection.db.listCollections()

  3. 在虚拟机下安装hadoop集成环境（centos7+hadoop-2.6.4+jdk-7u79）

    [1]64为win7系统,用virtualbox建立linux虚拟机时,为什么没有64位的选项? 百度 [2]在virtualbox上安装centos7 [3]VirtualBox虚拟机网络环境解析和 ...

  4. 【目录】python

    python 入门学习(一) 入门学习(二) 入门学习(三) 入门学习(四) 入门学习(五) 入门学习(六) 入门学习(七) 入门学习(八) 入门学习(九) 入门学习(十) Head First Py ...

  5. 【python】装饰器

    来源:廖雪峰 看了好多次装饰器,发现还是廖老师讲得好,能让我看懂..... 下面是一段装饰器代码 @log def now(): " 它的含义等价于 def now(): " no ...

  6. HTTP状态码（2xx，3xx，4xx，5xx）

    HTTP状态码负责表示客户端请求的返回结果,标记服务器的处理结果. HTTP常用状态码分为5种:   类别 原因短语 1xx Informational(信息状态码) 接受请求正在处理 2xx Suc ...

  7. nodeJS搭建本地服务器

    准备工作: 安装Node JS: 1:安装全局express:在express4.x版本中,安装时语句变为了这样: npm install -g express-generator 2:创建项目: 选 ...

  8. Pyqt+QRcode 生成 识别 二维码

    1.生成二维码 python生成二维码是件很简单的事,使用第三方库Python QRCode就可生成二维码,我用Pyqt给QRcode打个壳 一.python-qrcode介绍 python-qrco ...

  9. Python requests模拟登录

    Python requests模拟登录 #!/usr/bin/env python # encoding: UTF-8 import json import requests # 跟urllib,ur ...

  10. LeetCode: Largest Rectangle in Histogram(直方图最大面积)

    http://blog.csdn.net/abcbc/article/details/8943485 具体的题目描述为: Given n non-negative integers represent ...