首頁 > 開發者 > JavaScript
JS運動學習筆記，js學習筆記
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>任意值的運動架構</title> <style> div { float: left; width: 200px; height: 200px; margin: 20px; background-color: yellow; border: 1px solid black; font-size: 14px; filter: alpha(opacity=30); /*IE*/ opacity: 0.3; /*Firefox,chrome*/ } </style> <script> window.onload = function () {//Div變高 var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function () { startMove(this, 'height', 400); }; oDiv1.onmouseout = function () { startMove(this, 'height', 200); };//Div變寬 var oDiv2 = document.getElementById('div2'); oDiv2.onmouseover = function () { startMove(this, 'width', 400); }; oDiv2.onmouseout = function () { startMove(this, 'width', 200); };//改變文字大小 var oDiv3 = document.getElementById('div3'); oDiv3.onmouseover = function () { startMove(this, 'fontSize', 30); }; oDiv3.onmouseout = function () { startMove(this, 'fontSize', 14); };//修改透明度 var oDiv4 = document.getElementById('div4'); oDiv4.onmouseover = function () { startMove(this, 'opacity', 100); }; oDiv4.onmouseout = function () { startMove(this, 'opacity', 30); }; }; //屬性值的擷取函數 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }//運動架構 var timer = null; function startMove(obj, attr, iTarget) { //obj代表對象,attr代表目標屬性,iTarget代表設定的屬性目標值 clearInterval(obj.timer); //每次執行函數之前清除定時器,保證每次只有一個定時器在工作 obj.timer = setInterval(function () { var cur = 0; if (attr == 'opacity') { //透明度屬性的擷取 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round針對IE7出現小數的問題 } 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) + ')'; //IE瀏覽器 obj.style.opacity = (cur + speed) / 100; //Firefox,chrome } else { obj.style[attr] = cur + speed + 'px'; //非透明度屬性值 } } }, 30); } </script></head><body><div id="div1">變高</div><div id="div2">變寬</div><div id="div3">I Love JavaScript!</div><div id="div4">修改透明度</div></body></html>
關於JS運動架構，需要注意的點如下：
1. 透明度和非透明度屬性值的擷取和賦值需要分開設定；一般屬性的單位值為px，透明度沒有單位；
2. 透明度有相容性問題;IE瀏覽器: filter:alpha(opacity=30); Firefox和chrome: opacity = 0.3; 因為透明度的值為小數，所以擷取時需要使用parseFloat方法而非parseInt，後者會將透明度的值取0，從而設定無效；
3. 在IE7下，parseFloat（）*100得出的值可能為非整數，需要使用Math.round進行四捨五入做相容處理；
4. speed = iTarget - cur, 得出的值可能為正或為負的小數，如果為正需要向上取整，為負向下取整，如果不進行此操作，將永遠無法達到目標值，電腦關於屬性值最小計算單位為1px,當 var speed = (iTarget - cur) / 6 的值小於0.5時會被忽略，具體請參考如下例子，當speed=0.4和0.5時，點擊按鈕時文字框內數值的變化。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width:100px; height:50px; background-color: yellow; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { var speed = 0.5;// var speed = 0.4; oDiv.style.width = oDiv.offsetWidth + speed + 'px'; document.getElementById('text1').value = oDiv.offsetWidth; }; } </script></head><body><div id="div1"></div><input type="button" id="btn1" value="按鈕"><input type="text" id="text1"></body></html>關於小數取整的例子5. 關於定時器：在每次執行運動架構內的定時器之前，應當清除所有定時器，保證每次只有一個定時器在運作，否則多個定時器同時工作會出bug，運行速度越來越快。
6. 當出現相同冗餘代碼時，可以適當引入參數，簡化代碼。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
