<!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. MySQL的安装和启动

    一.MySQL各类安装方法的比较 在Linux系统下,MySQL有3种主要的安装方式,分别是:RPM安装.二进制安装.源码安装.三种安装方式的优缺点如下表所示:   RPM安装 二进制安装 源码安装 ...

  2. OFDM同步算法之Minn算法

    minn算法代码 算法原理 训练序列结构 T=[B B -B -B],其中B表示由长度为N/4的复伪随机序列PN,ifft变换得到的符号序列 (原文解释):B represent samples of ...

  3. [ SCOI 2005 ] 最大子矩阵

    \(\\\) \(Description\) 给出一个\(N\times M\)的有权矩阵,选出其中\(K\)个互不重叠的子矩阵,使得这\(K\)个子矩阵的权值和最大. \(N\in [1,100]\ ...

  4. PD（Power Delivery）充电协议

    关于PD的历史进程,可以在我转载的另一篇文章中了解 http://www.cnblogs.com/Hello-words/p/7851627.html PD 1.0 用的是 BFSK在 VBUS上进行 ...

  5. Rsync 传输不需要输入密码

    1.背景 1)        一个作为服务器端:VM3(IP: 3.9.8.151) 2)        一个作为客户端:VM2(IP: 3.9.8.157) 3)        服务器端和客户端网络 ...

  6. Linux 配置JDK + MyEclipse

    版本:Ubuntu16.04: jdK: Java SE Development Kit 8u102; My Eclipse: 10.6; JDK配置的细致步骤参见此处. 就一点要注意: 请使用代码进 ...

  7. antiSMASH数据库：微生物次生代谢物合成基因组簇查询和预测

    2017年4月28日,核酸研究(Nucleic Acids Research)杂志上,在线公布了一个可搜索微生物次生代谢物合成基因组簇的综合性数据库antiSMASH数据库 4.0版,前3版年均引用2 ...

  8. [转载]java中Date，SimpleDateFormat

    一.Java中的日期概述: 日期在Java中是一块非常复杂的内容,对于一个日期在不同的语言国别环境中,日期的国际化,日期和时间之间的转换,日期的加减运算,日期的展示格式都是非常复杂的问题. 在Java ...

  9. C# MVC ajax上传 文件

    用普通的ajax提交表单的时候,不能把文件流传到后端去,所以要用到jquery.form.js jquery.form.js到官网下载或者从这里下载:http://pan.baidu.com/s/1c ...

  10. c++ map: 使用struct或者数组做value

    Notice 如果是program中有两个map对象,可能你需要两个map iterator,但是注意两个iter object不能命名一样,可以分别为iter1, iter2 Example #in ...