本文，是接著上 基于勻速運動的實例講解(側邊欄,淡入淡出) 繼續的，在這篇文章的最后，我們做了2個小實例：側邊欄與改變透明度的淡入淡出效果，本文我們把上文的animate函數，繼續改造，讓他變得更加的通用和強大：
1，支持多個物體的運動
2，同時運動
3，順序運動
這三種運動方式也是jquery中animate函數支持的
一、animate函數中怎么區分變化不同的樣式？
上文中，側邊欄效果 用的animate函數 改變的是left值
function animate(obj, target, speed) { clearInterval(timer); timer = setInterval(function () { if (obj.offsetLeft == target) { clearInterval(timer); } else { obj.style.left = obj.offsetLeft + speed + 'px'; } }, 30);}淡入淡出效果 用的animate函數 改變的是透明度
function animate(obj, target, speed) { clearInterval(timer); var cur = 0; timer = setInterval(function () { cur = css( obj, 'opacity') * 100; if( cur == target ){ clearInterval( timer ); }else { cur += speed; obj.style.opacity = cur / 100; obj.style.filter = "alpha(opacity:" + cur + ")"; } }, 30); }而我們封裝的函數，要變成通用的，首先面臨的問題就是 這個函數要同時支持left值和透明度的變化，更通用的做法應該是要支持所有的樣式變化，比如輪播功能，他有左右滑動，也有上下滑動。
我們可以在獲取樣式和改變樣式的時候，做一下判斷就可以了，判斷分2類就能達到目的，因為其他樣式( margin, left, top, right, font-size等等 )都是px，而透明度沒有px單位
function animate(obj, attr, target, speed) { clearInterval(timer); var cur = 0; timer = setInterval(function () { if (attr == 'opacity') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, attr)); } if (cur == target) { clearInterval(timer); } else { if (attr == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; } else { obj.style[attr] = cur + speed + "px"; } } }, 30);}合并之后的animate相比之前多了一個參數attr, 這個參數就是變化的樣式，obj: 變化的對象， target: 樣式需要變化到的目標值. speed: 樣式每次變化的大小
如：
oImg.onmouseover = function () { animate(this, 'opacity', 100, 10);}oImg是獲取到的圖片對象. 這里各參數意思如下：
this：當前圖片對象
opacity: 變化的樣式是透明度
100: 鼠標移到圖片上時，透明度變成100
10: 透明度每次在原來的基礎上加10
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>合并的運動 - by ghostwu</title> <style> img { border: none; opacity: 0.3; filter: alpha(opacity:30); position: absolute; left: 200px; } #box { width: 150px; height: 300px; background: red; position: absolute; left: -150px; top: 50px; } #box div { width: 28px; height: 100px; position: absolute; right: -28px; top: 100px; background: green; } </style> <script> window.onload = function () { var oImg = document.getElementById("img"), oBox = document.getElementById("box"), timer = null; oImg.onmouseover = function () { animate(this, 'opacity', 100, 10); } oImg.onmouseout = function () { animate(this, 'opacity', 30, -10); } oBox.onmouseover = function () { animate(this, 'left', 0, 10); } oBox.onmouseout = function () { animate(this, 'left', -150, -10); } function animate(obj, attr, target, speed) { clearInterval(timer); var cur = 0; timer = setInterval(function () { if (attr == 'opacity') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, attr)); } if (cur == target) { clearInterval(timer); } else { if (attr == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; } else { obj.style[attr] = cur + speed + "px"; } } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script></head><body><div id="box"> <div>分享到</div></div><img src="./img/h4.jpg" alt="" id="img"/></body></html>上述就是完整的代碼實例。
當你分別測試這兩個功能的時候：
移動到圖片上然后移出來
移動到分享到，然后移出來
這樣是沒有問題的
如果你這樣測試：
移動到 分享到，然后迅速又移動到圖片上， 這個時候你會發現 分享到 停下來了，這就不符合邏輯了! 按道理來說，鼠標移動到圖片上，相當于觸發了 “分享到” 的mouseout( 鼠標移出事件 )，那么 "分享到" 這個時候要隱藏，并不是停止。 為什么會這樣呢？因為這兩個運動共享了一個定時器，當鼠標移動到圖片上，開啟定時器的時候，把“分享到”的定時器給停了。那么再做多物體運動的時候，我們就要把定時器拆分，每個對象都要有一個定時器，怎么做呢？ 非常簡單，不要定義一個簡單的timer變量，我們只要把timer加在obj對象上，那么每個對象都有一個timer屬性，就達到定時器的分離效果了
修改之后的完整代碼如下，請自行展開：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img { border: none; opacity: 0.3; filter: alpha(opacity:30); position: absolute; left: 200px; } #box { width: 150px; height: 300px; background: red; position: absolute; left: -150px; top: 50px; } #box div { width: 28px; height: 100px; position: absolute; right: -28px; top: 100px; background: green; } </style> <script> window.onload = function () { var oImg = document.getElementById("img"), oBox = document.getElementById("box"); oImg.onmouseover = function () { animate(this, 'opacity', 100, 10); } oImg.onmouseout = function () { animate(this, 'opacity', 30, -10); } oBox.onmouseover = function () { animate(this, 'left', 0, 10); } oBox.onmouseout = function () { animate(this, 'left', -150, -10); } function animate(obj, attr, target, speed) { clearInterval(obj.timer); var cur = 0; obj.timer = setInterval(function () { if (attr == 'opacity') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, attr)); } if (cur == target) { clearInterval(obj.timer); } else { if (attr == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; } else { obj.style[attr] = cur + speed + "px"; } } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script></head><body><div id="box"> <div>分享到</div></div><img src="./img/h4.jpg" alt="" id="img"/></body></html>至此，我們就完成了多物體運動與不同樣式的修改
二、讓animate函數支持多個樣式同時改變
比如：
oBox.onmouseover = function(){ animate( this, { "width" : 500, "height" : 400 }, 10 );}oBox是一個div元素，animate各參數的意思：
this: 當前div元素
{width : 500, "height" : 400 } : 把寬度變成500, 高度變成400，這兩個樣式要在同一時間完成，
10: 樣式每次在原來的基礎上變化10（如width初始值200--> 210, 220, 230.....）
完整的同時運動變化 代碼：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background: red; } </style> <script> window.onload = function () { var oBox = document.getElementById("box"); oBox.onmouseover = function(){// animate( this, { "width" : 500, "height" : 500 }, 10 ); animate( this, { "width" : 500, "height" : 400 }, 10 ); } function animate(obj, attr, speed) { clearInterval(obj.timer); var cur = 0; obj.timer = setInterval(function () { for ( var key in attr ) { if (key == 'opacity') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, key)); } var target = attr[key]; if (cur == target) { clearInterval(obj.timer); } else { if (key == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; } else { obj.style[key] = cur + speed + "px"; } } } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script></head><body> <div id="box"></div></body></html>請自行展開這段代碼，這段代碼能夠同時運動，但是有一個問題：
div的初始寬度與高度（ width : 200, height : 200）
變化步長一樣( 10 )
變化時間一樣( 每30毫秒變化一次 )
目標( width: 500, height : 400 )
你能想到什么問題嗎？( 兩個人在同一起跑線上，速度一樣， 時間一樣，但是要同時到達不同的目標，一個500, 一個400 )
答案是很明顯的，肯定是目標近的( height : 400 )那個先到達，然后把對象上的定時器關了，另一個目標更遠的( width: 500 )肯定到達不了
你可以在這句代碼下面，輸出當前的值和目標值：
var target = attr[key];console.log( key, cur, target );
輸出來的結果是：
從上圖可以看出，height已經達到了400px，但是width停在了410px,為什么不是400px ? 因為width = 400的時候， 就是( cur == 500 ) 相當于( 400 == 500 ) 不成立，所以執行了else語句，width = cur + 10 = 400 + 10 = 410，然后height到達400px停止了定時器，所以width停在了410px.
那么我們怎么解決這個問題呢？
其實也好辦，就是height = 400的時候 不要把定時器關了，應該等width = 500的時候再關閉定時器，不就在同一時間，完成了同時到達目標的效果嗎？
修改后的代碼如下：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background: red; } </style> <script> window.onload = function () { var oBox = document.getElementById("box"); oBox.onmouseover = function(){ animate( this, { "width" : 500, "height" : 400 }, 10 ); } function animate(obj, attr, speed) { clearInterval(obj.timer); var cur = 0; obj.timer = setInterval(function () { var bFlag = true; for ( var key in attr ) { if (key == 'opacity') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, key)); } var target = attr[key]; if (cur != target) { bFlag = false; if (key == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; } else { obj.style[key] = cur + speed + "px"; } } } if ( bFlag ) { clearInterval( obj.timer ); } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script></head><body> <div id="box"></div></body></html>聲明一個變量，每次變化完一次( width, height )樣式 把bFlag = true， 只要在for循環中有一個沒有到達目標，bFlag的值都是false，這樣就不會關閉定時器。當兩個都到達目標，才關閉定時器.
三、順序運動
如樣式變化，按順序來，不是同時變化， 如：
oBox.onmouseover = function(){//回調函數： 把函數當做參數傳遞給另一個函數 animate( this, { 'width' : 500 }, 10, function(){ animate( this, { 'height' : 500 }, 10 ); } );}當把width變成500px的時候，如果傳遞了回調函數， 再接著執行回調函數里面的運動
修改后的完整代碼：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>通用的勻速運動框架 - by ghostwu</title> <style> div { width: 200px; height: 200px; background: red; } </style> <script> window.onload = function () { var oBox = document.getElementById("box"); oBox.onmouseover = function(){ //回調函數： 把函數當做參數傳遞給另一個函數 animate( this, { 'width' : 500 }, 10, function(){ animate( this, { 'height' : 500 }, 10 ); } ); } function animate(obj, attr, speed, fn ) { clearInterval(obj.timer); var cur = 0; obj.timer = setInterval(function () { var bFlag = true; for (var key in attr) { if (key == 'opacity') { cur = css(obj, 'opacity') * 100; } else { cur = parseInt(css(obj, key)); } var target = attr[key]; if (cur != target) { bFlag = false; if (key == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.style.filter = "alpha(opacity:" + (cur + speed) + ")"; } else { obj.style[key] = cur + speed + "px"; } } } if (bFlag) { clearInterval(obj.timer); fn && fn.call( obj ); } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script></head><body><div id="box"></div></body></html>以上這篇打造通用的勻速運動框架(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
