<!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. 【转】关于Java基础你不得不会的34个问题

    1. 面向对象和面向过程的区别 面向过程 优点: 性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linux/Unix等一般采用面向过程开发,性能是最重要的 ...

  2. 调取easyui -windows 返回值问题

    //-------------------------------------------------------------------------------------------------- ...

  3. JavaScript入门三

    *********BOM和DOM******** JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 Java ...

  4. scrapy框架简介和基础应用(python爬虫)

    一.什么是scrapy? scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,非常出名,非常强悍,所谓的框架就是一个已经被集成了各种功能(高性能异步下载,队列,分布式,持久化等)的具有 ...

  5. scala控制流程语句

    直接上代码了哈. package com.test.scala.test object Kongzi { def main(args: Array[String]): Unit = { //if 语句 ...

  6. JS——缓动框架的问题

    1.opacity问题:IE678支持filter: alpha(opacity=50)取值1-100:小数位容易精度丢失,所i有统一json字符串设置为百进制,赋值时除以100 2.zIndex问题 ...

  7. SQL基本操作——通配符

    SQL 通配符:在搜索数据库中的数据时,SQL 通配符可以替代一个或多个字符.SQL 通配符必须与 LIKE 运算符一起使用.在 SQL 中,可使用以下通配符: 通配符 描述 % 替代一个或多个字符 ...

  8. Apache服务器防范DoS

    Apache服务器对拒绝服务攻击的防范主要通过软件Apache DoS Evasive Maneuvers Module  来实现.它是一款mod_access的替代软件,可以对抗DoS攻击.该软件可 ...

  9. dubbo之并发控制

    并发控制 配置样例 样例 1 限制 com.foo.BarService 的每个方法,服务器端并发执行(或占用线程池线程数)不能超过 10 个: <dubbo:service interface ...

  10. HDU_4826_dp

    Labyrinth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...