<!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. [Swift通天遁地]七、数据与安全-(18)使用Swift实现原生的MD5加密

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. Appium + python -yaml配置文件

    在线安装:pip install yaml import yamlimport os # 获取当前脚本所在文件夹路径curpath = os.path.dirname(os.path.realpath ...

  3. Elasticsearch搜索常用API（利用Kibana来操作）

    上面我们已经介绍了Elasticsearch的一些基本操作,这篇文章属于进阶篇,我们一起来学习. 前面我们创建了sdb和user文档,现在我们来看如何查询user中所有的文档呢? GET /sdb/u ...

  4. mysql中类型转换

    MySQL 的CAST()和CONVERT()函数可用来获取一个类型的值,并产生另一个类型的值 CAST(xxx AS 类型), CONVERT(xxx,类型) 二进制,同带binary前缀的效果 : ...

  5. 警告视图及操作表单在xcode7.0中的使用

    警告视图(alert)及操作表单(action sheet)都用于向用户提供反馈.(模态视图) 操作表单:要求用户在两个以上选项之间做出选择.操作表单从屏幕底部出现,显示一系列按钮供用户选择.用户必须 ...

  6. 从"嘿,今晚..."谈消息安全传输中的技术点

    一.初级阶段:信息裸传 特点:在网络上传递明文 黑客定理一:网络上传递的数据是不安全的,属网络于黑客公共场所,能被截取 结果:传递明文无异于不穿衣服裸奔 改进方案:先加密,再在网络上传输 二.进阶阶段 ...

  7. ArcGIS Android工程迁移到其他电脑不能打开的问题

    问题描述:当我把已经做好的ArcGIS Android工程想在其他电脑运行时,总是会提示报错.而报错的地方,正是出现在下面这条语句上. compile 'com.esri.arcgisruntime: ...

  8. sql中表变量

    今天在公司看sql优化的文章的时候,提到了表变量,做下笔记. 表变量 顺便复习下临时表.

  9. 解决richfaces自带的jquery

    项目里有个有史以来让人头疼的问题,就是前端的richfaces框架自带有jquery插件,而且好像总是在最后才加载,导致前面自己加载好的jquery版本的框架以及应用到jquery的其他前端框架生成的 ...

  10. CentOS7阿里云服务器，python程序requests无法正常post网站(报502)

    问题描述: 使用jenkins构建接口自动化测试时,发现新增加的接口case不能访问通,会报502错误(本地可以跑通,在测试服就会502)解决的思路: 缩小调试范围(去掉jenkins db环境,将问 ...