上節(jié)課 我們講解了如何獲取到非行內(nèi)樣式，并完成了一個簡單的div寬度變化霎箍，現(xiàn)在我們繼續(xù)完善，實現(xiàn)如下效果：
animation.png
實現(xiàn)過程：
a. 設(shè)置其鼠標的移動事件：
window.onload = function () {
//獲取到div元素
var div1 = document.getElementById("div1");
//設(shè)置鼠標事件
div1.onmouseover = function () {
startMove(this, 400);
};
div1.onmouseout = function () {
startMove(this, 200);
}
};
b. 獲取到元素樣式函數(shù)：
function getStyle(obj, attr) {
//判斷是否支持currentStyle屬性读宙，若為IE則支持
if (obj.currentStyle){
//返回該樣式
return obj.currentStyle[attr];
}
//若不支持稚补，則使用getComputedStyle方法，使得火狐和谷歌支持
else {
return getComputedStyle(obj, null)[attr];
}
}
實現(xiàn)運動事件：
function startMove(obj,iTarget) {
//取消其他time事件慎菲，防止鼠標多次的移入移出產(chǎn)生異常的效果
clearInterval(obj.timer);
//設(shè)置time事件嫁蛇，每30ms執(zhí)行一次
obj.timer = setInterval(function (){
//獲取到當前元素的寬度，并轉(zhuǎn)換為int類型
var iCurrent = parseInt(getStyle(obj, 'width'));
//計算其速度
var speed = (iTarget - iCurrent) / 8;
//對速度進行取整露该，因為上面的除法可能會產(chǎn)生小數(shù)點
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//與目標值進行比較棠众，達到目標值，則取消時間函數(shù)
if(iCurrent == iTarget){
clearInterval(obj.timer);
}
//未到達目標值有决，則進行改變樣式
else {
obj.style['width'] = iCurrent + speed + 'px';
}
},30);
}
關(guān)于ceil()函數(shù) 和 floor()函數(shù)：
Math.ceil(x) : 返回大于等于x，并且與它最接近的整數(shù)空盼。
Math.floor(x)：小于等于x书幕，并且與x最接近的整數(shù)。
實現(xiàn)動畫：一個改變div的寬度揽趾，一個改變div的高度台汇，效果如下：
animation.png
實際上，我們改變寬度的div動畫已經(jīng)實現(xiàn)了篱瞎，而對于改變div的高度也就是將要改變的樣式修改為高度即可：增加了startMove1函數(shù)
window.onload = function () {
//獲取到div元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//設(shè)置鼠標事件
div1.onmouseover = function () {
startMove(this, 400);
};
div1.onmouseout = function () {
startMove(this, 200);
};
div2.onmouseover = function () {
startMove1(this,400);
};
div2.onmouseout = function () {
startMove1(this, 200);
}
};
function startMove1(obj,iTarget) {
//取消其他time事件苟呐，防止鼠標多次的移入移出產(chǎn)生異常的效果
clearInterval(obj.timer);
//設(shè)置time事件，每30ms執(zhí)行一次
obj.timer = setInterval(function (){
//獲取到當前元素的寬度俐筋，并轉(zhuǎn)換為int類型
var iCurrent = parseInt(getStyle(obj, 'height'));
//計算其速度
var speed = (iTarget - iCurrent) / 8;
//對速度進行取整牵素，因為上面的除法可能會產(chǎn)生小數(shù)點
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//與目標值進行比較，達到目標值澄者，則取消時間函數(shù)
if(iCurrent == iTarget){
clearInterval(obj.timer);
}
//未到達目標值笆呆，則進行改變樣式
else {
obj.style['height'] = iCurrent + speed + 'px';
}
},30);
}
我們對比一下startMove函數(shù)和startMove1函數(shù)，實際上就是改變的樣式不同粱挡，一個改變寬度赠幕，一個改變高度。因此询筏，我們可以修改榕堰，將兩個函數(shù)合并起來。
window.onload = function () {
//獲取到div元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//傳入寬度樣式
div1.onmouseover = function () {
startMove(this, 400,'width');
};
div1.onmouseout = function () {
startMove(this, 200,'width');
};
//傳入高度樣式
div2.onmouseover = function () {
startMove(this,400,'height');
};
div2.onmouseout = function () {
startMove(this, 200,'height');
}
};
//增加了attr參數(shù)嫌套，表示要改變的樣式
function startMove(obj,iTarget,attr) {
clearInterval(obj.timer);
obj.timer = setInterval(function (){
//傳入樣式參數(shù)
var iCurrent = parseInt(getStyle(obj, attr));
var speed = (iTarget - iCurrent) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(iCurrent == iTarget){
clearInterval(obj.timer);
}
else {
//對傳入的樣式進行改變
obj.style[attr] = iCurrent + speed + 'px';
}
},30);
}
實際上逆屡，修改的部分即含有注釋部分圾旨。
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Style</title>
<style>
ul{
list-style: none;
}
#div1{
width: 200px;
height: 200px;
background: #ff0;
border: 2px solid #000;
}
#div2{
width: 200px;
height: 200px;
background: #ff0;
border: 2px solid #000;
}
</style>
<script>
window.onload = function () {
//獲取到div元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//設(shè)置鼠標事件
div1.onmouseover = function () {
startMove(this, 400,'width');
};
div1.onmouseout = function () {
startMove(this, 200,'width');
};
div2.onmouseover = function () {
startMove1(this,400,'height');
};
div2.onmouseout = function () {
startMove1(this, 200,'height');
}
};
//增加了attr參數(shù)，表示要改變的樣式
function startMove(obj,iTarget,attr) {
clearInterval(obj.timer);
obj.timer = setInterval(function (){
//傳入樣式參數(shù)
var iCurrent = parseInt(getStyle(obj, attr));
var speed = (iTarget - iCurrent) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(iCurrent == iTarget){
clearInterval(obj.timer);
}
else {
//對傳入的樣式進行改變
obj.style[attr] = iCurrent + speed + 'px';
}
},30);
}
/**
* 封裝一個函數(shù)用來獲取樣式
* @param obj 傳入的元素對象
* @param attr 傳入要獲取的樣式
* @returns {*}
*/
function getStyle(obj, attr) {
//判斷是否支持currentStyle屬性康二，若為IE則支持
if (obj.currentStyle){
//返回該樣式
return obj.currentStyle[attr];
}
//若不支持碳胳，則使用getComputedStyle方法，使得火狐和谷歌支持
else {
return getComputedStyle(obj, null)[attr];
}
}
</script>
</head>
<body>
<ul>
<li>
<div id="div1"></div>
</li>
<li>
<div id="div2"></div>
</li>
</ul>
</body>
</html>
總結(jié)：
這一節(jié)主要學習了修改不同樣式的動畫沫勿，并做了一定的封裝挨约。注意：對于重復的代碼，我們一定要將其合并产雹，使代碼顯得更加整潔诫惭。
