<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>3.带运动效果的留言本</title>

         <meta name="author" content="Administrator" />

         <!-- Date: 2014-12-11 -->

         <style>

             *{margin:0;padding:0}

             textarea{border:1px solid #000;}

             ul{overflow:hidden;width:500px;height:500px;padding:10px; border:1px solid #000; position:absolute;right:300px;top:0}

             li{list-style:none;line-height:28px;border-bottom:1px solid #ccc;overflow:hidden}

         </style>

         <script>

             window.onload=function(){

                 var oTxt=document.getElementsByTagName('textarea')[0];

                 var oBtn=document.getElementById('btn');

                 var oUl=document.getElementsByTagName('ul')[0];

                 oBtn.onclick=function(){

                     var oLi=document.createElement('li');

                     oLi.innerHTML=oTxt.value;

                     oUl.appendChild(oLi);

                     oTxt.value='';

                     //这里要先将oLi的offsetHeight存起来,然后再设置初始化高度为0,如果顺序反了将不起作用,那么就是先设为0，再获取高度了

                     var iHnow=parseInt(css(oLi,'height')); //parseInt 将字符串类型转化为数字类型

                     oLi.style.height='0px';

                     huanchong(oLi,{

                          'height':iHnow

                     })

                 }

             }

             function css(obj,attr) {

                 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]

                 }

             function huanchong(obj,json,fn){

                     clearInterval( obj.timer );

                     obj.timer=setInterval(function(){

                         var iBtn=true;

                         for(var attr in json){

                             var iTarget = json[attr];

                             if(attr == 'opacity' ){

                                 var iSpeed = (iTarget-Math.round((css(obj,attr)*100)))/6;

                             }else{

                                 var iSpeed = (iTarget-parseInt(css(obj,attr)))/6;

                             }

                             iSpeed= iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  //精确值

                             if(attr == 'opacity' ){

                                 var s=Math.round(css(obj,attr)*100) + iSpeed;

                             }else{

                                 var s=parseInt(css(obj,attr)) + iSpeed;

                             }

                             if( s > iTarget && iSpeed > 0 || s < iTarget && iSpeed < 0) s=iTarget;

                             if( s!= iTarget ){

                                 iBtn=false;

                                 if(attr == 'opacity' ){

                                     obj.style[attr] = s/100;

                                     obj.style.filter='alpha(opacity='+s+')'

                                 }else{

                                     obj.style[attr] = s +'px';

                                 }

                             }

                         }

                         if( s!= iTarget ){

                             iBtn=true;

                             fn && fn.call(obj)

                         }

                     },30)

             }

         </script>

     </head>

     <body>

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

         <input type="button" id="btn" value='留言'/>

         <ul> </ul>

     </body>

 </html>

JS 缓冲运动 带运动的留言本 小案例的更多相关文章

  1. JS 仿淘宝幻灯片 非完整版 小案例

    仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...

  2. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  3. JS缓冲运动案例：右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  4. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

  5. JS 带运动的返回顶部 小案例

    带运动的返回顶部:当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器.下面的方法b 就是清掉的方法 <!DOCTYPE html PUBLIC "-//W3C//D ...

  6. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

  8. JS多物体宽度运动案例

    任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px. 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器 ...

  9. js动画之简单运动一

    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...

随机推荐

  1. --NSArray与NSMutableArray用copy修饰还是strong（转）

    一.NSMutableArray 被copy.strong修饰后的变化: 把NSMutableArray用copy修饰有时就会crash,因为对这个数组进行了增删改操作,而copy后的数组变成了不可变 ...

  2. hdu2029

    http://acm.hdu.edu.cn/showproblem.php?pid=2029 #include<stdio.h> #include<string.h> #inc ...

  3. Coursera公开课-Machine_learing：编程作业7

    这周的编程作业主要是两方面内容. 1.K-means聚类. 2.PCA(Principle Component Analys)主成分分析. 方式主要是通过对图像的聚类实现压缩图像,后来发现PCA也可以 ...

  4. Elasticsearch之Hadoop插件的安装（图文详解）

    这个Hadoop插件的安装是非常重要. Hadoop插件安装 在es的安装目录下 bin/plugin install elasticsearch/elasticsearch-repository-h ...

  5. BOM 标记

    BOM 是 Byte Order Mark 的简称,即字节序标记.用于标记文本流: 表示文本流的字节顺序,是小端序(little-endian)还是大端序(big-endian); 表示文本流是 Un ...

  6. 通过yum命令搭建lamp环境(centos6.5)

    centos 6.5 1.yum安装和源代码编译在使用的时候没啥区别,但是安装的过程就大相径庭了,yum只需要3个命令就可以完成,源代码需要13个包,还得加压编译,步骤很麻烦,而且当做有时候会出错,源 ...

  7. Android sensor 系统框架 （一）

    这几天深入学习了Android sensor框架,以此博客记录和分享分析过程,其中难免会有错误的地方,欢迎指出! 这里主要分析KERNEL->HAL->JNI这3层的流程.主要从以下几方面 ...

  8. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 01--SQLite学习网站参考

    1.   SQLite基本操作 见我的02—SQLite一步到位 sqlite3编程笔记 . http://blog.csdn.net/wl_haanel/article/details/623141 ...

  10. 【译】x86程序员手册05 - 2.3寄存器

    2.3 Registers 寄存器 The 80386 contains a total of sixteen registers that are of interest to the applic ...