JS运动应用
多个物体同时运动
例子：多个Div，鼠标移入变宽
单定时器，存在问题
每个Div一个定时器
多物体运动框架
定时器作为物体的属性
参数的传递：物体、目标值
例子：多个Div淡入淡出
所有东西都不能公用
属性与运动对象绑定：速度、其他属性值（如透明度等）
offset属性的Bug
有边框的Div变宽
用currentStyle代替offset
原有运动框架的问题
只能让某个值运动起来
如果想让其他值运动起来，要修改程序
扩展的运动框架
运动属性作为参数
封装opacity
小数的问题
1 <style> 2 div {200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; font-size:14px;} 3 </style> 4 <script> 5 window.onload=function () 6 { 7 oDiv1=document.getElementById('div1'); 8 oDiv1.onmouseover=function (){ startMove(this,'width',400) } 9 oDiv1.onmouseout=function (){ startMove(this,'width',200)} 10 11 oDiv2=document.getElementById('div2'); 12 oDiv2.onmouseover=function (){ startMove(this,'fontSize',100) } 13 oDiv2.onmouseout=function (){ startMove(this,'fontSize',20)} 14 15 16 } 17 18 function startMove(obj,attr,iTarget) 19 { 20 clearInterval(obj.timer); 21 obj.timer=setInterval(function (){ 22 var cur=parseInt(getStyle(obj,attr)) 23 var speed=(iTarget-cur)/6; 24 speed=speed>0?Math.ceil(speed):Math.floor(speed); 25 if(cur==iTarget){clearInterval(obj.timer);} 26 else{ obj.style[attr]=cur+speed+'px'; } 27 28 },30) 29 30 } 31 32 function getStyle(obj,name) 33 { 34 if(obj.currentStyle) 35 { 36 return obj.currentStyle[name]; 37 } 38 else{ return getComputedStyle(obj,false)[name]; } 39 } 40 41 42 43 44 45 </script> 46 47 48 </head> 49 50 <body> 51 <div id="div1"></div> 52 <div id="div2">333333332fffs</div> 53 </body>
/**/ 改变不了透明度 。
效果思路
两边的按钮——淡入淡出
大图下拉——层级、高度变化
下方的li——多物体淡入淡出
下方的Ul——位置计算
左右按钮
淡入淡出
鼠标移到按钮上，按钮会消失
层级问题
按钮和遮罩上都得加上事件
1 <style> 2 div {200px; height:200px; margin:20px; float:left; background:red; filter:alpha(opacity:30); opacity:0.3;} 3 </style> 4 <script> 5 window.onload=function () 6 { 7 var aDiv=document.getElementsByTagName('div'); 8 9 for(var i=0;i<aDiv.length;i++) 10 { 11 aDiv[i].alpha=30; 12 13 aDiv[i].onmouseover=function () 14 { 15 startMove(this, 100); 16 }; 17 aDiv[i].onmouseout=function () 18 { 19 startMove(this, 30); 20 }; 21 } 22 }; 23 24 //var alpha=30; 25 26 function startMove(obj, iTarget) 27 { 28 clearInterval(obj.timer); 29 obj.timer=setInterval(function (){ 30 var speed=(iTarget-obj.alpha)/6; 31 speed=speed>0?Math.ceil(speed):Math.floor(speed); 32 33 if(obj.alpha==iTarget) 34 { 35 clearInterval(obj.timer); 36 } 37 else 38 { 39 obj.alpha+=speed; 40 41 obj.style.filter='alpha(opacity:'+obj.alpha+')'; 42 obj.style.opacity=obj.alpha/100; 43 } 44 }, 30); 45 } 46 </script> 47 </head> 48 49 <body> 50 <div></div> 51 <div></div> 52 <div></div> 53 <div></div> 54 </body>
/**/ 合并
1 <style> 2 div {200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; filter:alpha(opacity:30); opacity:0.3;} 3 </style> 4 <script> 5 window.onload=function () 6 { 7 var oDiv1=document.getElementById('div1'); 8 9 oDiv1.onmouseover=function () 10 { 11 startMove(this, 'opacity', 100); 12 }; 13 oDiv1.onmouseout=function () 14 { 15 startMove(this, 'opacity', 30); 16 }; 17 }; 18 19 function getStyle(obj, name) 20 { 21 if(obj.currentStyle) 22 { 23 return obj.currentStyle[name]; 24 } 25 else 26 { 27 return getComputedStyle(obj, false)[name]; 28 } 29 } 30 31 function startMove(obj, attr, iTarget) 32 { 33 clearInterval(obj.timer); 34 obj.timer=setInterval(function (){ 35 var cur=0; 36 37 if(attr=='opacity') 38 { 39 cur=Math.round(parseFloat(getStyle(obj, attr))*100); 40 } 41 else 42 { 43 cur=parseInt(getStyle(obj, attr)); 44 } 45 46 var speed=(iTarget-cur)/6; 47 speed=speed>0?Math.ceil(speed):Math.floor(speed); 48 49 if(cur==iTarget) 50 { 51 clearInterval(obj.timer); 52 } 53 else 54 { 55 if(attr=='opacity') 56 { 57 obj.style.filter='alpha(opacity:'+(cur+speed)+')'; 58 obj.style.opacity=(cur+speed)/100; 59 60 document.getElementById('txt1').value=obj.style.opacity; 61 } 62 else 63 { 64 obj.style[attr]=cur+speed+'px'; 65 } 66 } 67 }, 30); 68 } 69 </script> 70 </head> 71 72 <body> 73 <div id="div1"></div> 74 <input type="text" id="txt1" /> 75 </body>