js運動應用：多物體運動框架（上）
阿新 • • 發佈：2018-12-18
多物體運動框架原理：
1、所有屬性不可公用
2、屬性與運動物件繫結：速度，透明度等其他屬性值
案例一：多個div變寬：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width:100px; height:50px; background:red; margin:10px; } </style> <script> /**js運動應用--多個div變寬 1、用單個定時器，會存在一個物體開始運動的時候會影響另一個物體的關閉 2、解決方案：將定時器作為物體的屬性，每個div定義一個定時器 */ window.onload = function (){ var oDiv = document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ //每個div對應一個定時器 oDiv[i].timer = null; oDiv[i].onmouseover = function(){ startMove(this,500); } oDiv[i].onmouseout = function (){ startMove(this,100); } } }; //如果定義一個定時器，其中一個div開始運動的時候會影響另一個div的關閉。 //var timer = null; function startMove(obj,iTarget){ //關閉當前物體對應的timer clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget - obj.offsetWidth)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == iTarget){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth + speed + 'px'; document.title = obj.offsetWidth; } },30); }; </script> </head> <body> <div></div> <div></div> <div></div> </body> </html>案例二：多個div淡入淡出：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width:200px; height:200px; background:red; float:left; margin:10px; filter:alpha(opacity:30); opacity:0.3; } </style> <script> /**js運動應用--多個div變寬 每個div對應自己的透明度 */ window.onload = function (){ var oDiv = document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ //每個div對應一個定時器 oDiv[i].timer = null; oDiv[i].alpha = 30; oDiv[i].onmouseover = function(){ startMove(this,100); } oDiv[i].onmouseout = function (){ startMove(this,30); } } }; //定義一個透明度。 //var alpha = 30; function startMove(obj,iTarget){ //關閉當前物體對應的定時器 clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget - obj.alpha)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.alpha == iTarget){ clearInterval(obj.timer); }else{ obj.alpha += speed; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; obj.style.opacity =obj.alpha/100; } },30); }; </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>案例三：div變寬和變高
通過obj.offsetAttr來獲取樣式，通過這種方法來獲取元素的寬高時，如果沒有邊框border，可以正確獲取，如果使用邊框屬性則會出現問題， 為了解決這個問題，可以使用另一種方法，通過getComputedStyle屬性來獲取css樣式（非行間）。 還有一種是通style屬性來獲取css樣式（行間）。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width:200px; height:200px; background:yellow; float:left; margin:10px; border:1px solid black; } </style> <script> /**可作為獲取樣式的公共方法*/ function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } window.onload = function (){ var oDiv = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); oDiv.onmouseover = function (){ startMove(this,400,'width'); } oDiv.onmouseout = function(){ startMove(this,200,'width'); } oDiv2.onmouseover = function (){ startMove(this,400,'height'); }; oDiv2.onmouseout = function (){ startMove(this,200,'height'); } }; function startMove(obj,iTarget,attr){ //關閉當前物體對應的定時器 clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = parseInt(getStyle(obj,attr)); var speed = (iTarget - cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur == iTarget){ clearInterval(obj.timer); }else{ obj.style[attr] = cur + speed + 'px'; } },30); }; </script> </head> <body> <div id="div1">變寬</div> <div id="div2">變高</div> </body> </html>案例四：文字框展示div透明度，知識點：parseFloat小數點需四捨五入 Math.round()
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width:200px; height:200px; background:yellow; float:left; margin:10px; border:10px solid black; filter:alpha(opacity:30); opacity:0.3; } </style> <script> /**可作為獲取樣式的公共方法*/ function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } window.onload = function (){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function (){ startMove(this,100,'opacity'); } oDiv.onmouseout = function(){ startMove(this,30,'opacity'); } }; function startMove(obj,iTarget,attr){ //關閉當前物體對應的定時器 clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = 0; if(attr == 'opacity'){ //小數問題，需要四捨五入 cur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ cur = parseInt(getStyle(obj,attr)); } var speed = (iTarget - cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur == iTarget){ clearInterval(obj.timer); }else{ if(attr =='opacity'){ obj.style.filter = 'alpha(opacity:'+(cur+speed)+')'; obj.style.opacity =(cur+speed)/100; document.getElementById('txt1').value = obj.style.opacity }else{ obj.style[attr] = cur + speed + 'px'; } } },30); }; </script> </head> <body> <input type ="text" id="txt1"/> <div id="div1"></div> </body> </html>