JS 缓冲运动 带运动的留言本 小案例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>3.带运动效果的留言本</title>
 8         <meta name="author" content="Administrator" />
 9         <!-- Date: 2014-12-11 -->
10         <style>
11             *{margin:0;padding:0}
12             textarea{border:1px solid #000;}
13             ul{overflow:hidden;width:500px;height:500px;padding:10px; border:1px solid #000; position:absolute;right:300px;top:0}
14             li{list-style:none;line-height:28px;border-bottom:1px solid #ccc;overflow:hidden}
15         </style>
16         <script>
17             window.onload=function(){
18                 var oTxt=document.getElementsByTagName(‘textarea‘)[0];
19                 var oBtn=document.getElementById(‘btn‘);
20                 var oUl=document.getElementsByTagName(‘ul‘)[0];
21                 oBtn.onclick=function(){
22                     var oLi=document.createElement(‘li‘);
23                     oLi.innerHTML=oTxt.value;
24                     oUl.appendChild(oLi);
25                     oTxt.value=‘‘;
26
27                     //这里要先将oLi的offsetHeight存起来,然后再设置初始化高度为0,如果顺序反了将不起作用,那么就是先设为0,再获取高度了
28                     var iHnow=parseInt(css(oLi,‘height‘)); //parseInt 将字符串类型转化为数字类型
29                     oLi.style.height=‘0px‘;
30
31                     huanchong(oLi,{
32                          ‘height‘:iHnow
33                     })
34                 }
35             }
36             function css(obj,attr) {
37                 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]
38                 }
39             function huanchong(obj,json,fn){
40                     clearInterval( obj.timer );
41                     obj.timer=setInterval(function(){
42
43                         var iBtn=true;
44
45                         for(var attr in json){
46                             var iTarget = json[attr];
47
48                             if(attr == ‘opacity‘ ){
49                                 var iSpeed = (iTarget-Math.round((css(obj,attr)*100)))/6;
50                             }else{
51                                 var iSpeed = (iTarget-parseInt(css(obj,attr)))/6;
52                             }
53
54                             iSpeed= iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  //精确值
55
56                             if(attr == ‘opacity‘ ){
57                                 var s=Math.round(css(obj,attr)*100) + iSpeed;
58                             }else{
59                                 var s=parseInt(css(obj,attr)) + iSpeed;
60                             }
61
62                             if( s > iTarget && iSpeed > 0 || s < iTarget && iSpeed < 0) s=iTarget;
63
64                             if( s!= iTarget ){
65                                 iBtn=false;
66                                 if(attr == ‘opacity‘ ){
67                                     obj.style[attr] = s/100;
68                                     obj.style.filter=‘alpha(opacity=‘+s+‘)‘
69                                 }else{
70                                     obj.style[attr] = s +‘px‘;
71                                 }
72                             }
73
74                         }
75                         if( s!= iTarget ){
76                             iBtn=true;
77                             fn && fn.call(obj)
78                         }
79                     },30)
80             }
81         </script>
82     </head>
83     <body>
84         <textarea id="text" rows="10" cols="40"></textarea>
85         <input type="button" id="btn" value=‘留言‘/>
86         <ul> </ul>
87     </body>
88 </html>

时间: 2024-11-06 07:07:11

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

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

仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6

js缓冲运动代码实例

js缓冲运动代码实例:元素的缓冲运动效果要比匀速运动更为美观一些,因为显得更为有张力和弹性,当然对于浏览者来说可能会有更好的效果,那么留住用户的可能性也就更大,下面就通过代码实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

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

带运动的返回顶部:当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器.下面的方法b 就是清掉的方法 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en&

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js运动-完美运动框架

在上一篇的<js运动-同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacity:30}); } 在鼠标移入的时候,我们让width不变成300,而是变成204,看看会有什么变化那?? 从图可以看出,当

js多物体任意值运动

假如有两个div,一个div要变宽,一个div要变高,你怎么写呢? 哎呀,写2个方法啊,一个控制div1变宽,一个控制div2变高啊 那么你的代码,是不是下面这样的呢! 示例:Div变宽和变高 现象:div1在onmouseover时变宽,onmouseout时恢复原大小; div2在onmouseover时变高,onmouseout时恢复原大小 缺点:重复的代码写了好几个方法 html部分 <div id="div1"></div> <div id=&q

js多个物体运动的问题1

问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 让多个div变宽 现象:onmouseover时,div宽度变宽:onmouseout时,div恢复原大小 html部分 <div id="div1"></div> <div id="div2"></div> <di

js多个物体运动问题2

问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传递2个:物体,目标值 那么,如果运动物体的属性值改变,是通过一个变量值来改变的话,这时候会有什么问题呢? 示例:多个Div淡入淡出 现象:onmouseover时,透明度降低:onmouseout时,透明度增加 看看它会有什么问题,请看下面代码 html部分: <div id="div1&qu

JS定时器做物体运动

JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么?定时器的原理是什么? 我的理解为,定时器是能让一个物体根据规定的时间做规定的移动,而物体运动是怎样的效果呢?你可以理解为一个人走路,要走到某个位置,要走到这个位置肯定是一步步移动才能达到,而不是瞬间就到达的,所以定时器的作用更像是让物体像人一样走到相应的位置 比如: 规定一个横形状方块,其中包裹一个