<!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. Testng1

    Testng 简介: Testng是一套开源测试框架,是从Junit继承而来,testng意为test next generation,主要有以下特性: annotations  注释,如 @test ...

  2. ACM_求交集

    求交集 Time Limit: 2000/1000ms (Java/Others) Problem Description: 输入集合A和B,按大小顺序输出A和B的交集. Input: 输入包含多组测 ...

  3. ASP.NET 之正则表达式

    转载自:http://www.regexlib.com/cheatsheet.htm?AspxAutoDetectCookieSupport=1 Metacharacters Defined MCha ...

  4. Spring Boot (23) Lettuce Redis

    Spring Boot除了支持常见的ORM框架外,更是对常用的中间件提供了非常好的封装,随着SpringBoot2.x的到来,支持的组件也越来越丰富,也越来越成熟,其中对Redis的支持不仅仅是它丰富 ...

  5. 大话设计模式--DI（依赖注入）

    1.背景 想象一个场景:有个功能通过某个参数决定了路由到不同的方法上或者几个方法模块可以自由搭配,咋办?一般人会对每个方法写一个helper(比如SendMessageForEmail.SendMes ...

  6. lua_string_pattern

    两大特点: 1. string库中所有的字符索引从前往后是1,2,...;从后往前是-1,-2,... 2. string库中所有的function都不会直接操作字符串,而是返回一个新的字符串. 库函 ...

  7. JS——缓慢动画封装案例

    手风琴 1.排他思想 2.ul宽度需要大一点,防止li撑开跑下去 3.一个变大其他所有变小,变小不能太小,不然会出现空白 <!DOCTYPE html> <html lang=&qu ...

  8. JS——client

    clientTop.clientLeft: clientTop:盒子的上boder clientLeft:盒子的左border clientWidth与clientHeight 1.在有DTD情况下: ...

  9. Ubuntu14.4安装mysql

    一.安装 apt-get install mysql-server mysql-client 设置用户名和密码 二.检查 sudo service mysql restart 三.支持 1.apach ...

  10. logstash windows下添加服务启动管理

    nssm下载链接:http://nssm.cc/release/nssm-2.24.zip