上節(jié)課 我們講解了如何獲取到非行內(nèi)樣式，并完成了一個(gè)簡(jiǎn)單的div寬度變化，現(xiàn)在我們繼續(xù)完善，實(shí)現(xiàn)如下效果：
animation.png
實(shí)現(xiàn)過(guò)程：
a. 設(shè)置其鼠標(biāo)的移動(dòng)事件：
window.onload = function () {
//獲取到div元素
var div1 = document.getElementById("div1");
//設(shè)置鼠標(biāo)事件
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];
}
}
實(shí)現(xiàn)運(yùn)動(dòng)事件：
function startMove(obj,iTarget) {
//取消其他time事件，防止鼠標(biāo)多次的移入移出產(chǎn)生異常的效果
clearInterval(obj.timer);
//設(shè)置time事件，每30ms執(zhí)行一次
obj.timer = setInterval(function (){
//獲取到當(dāng)前元素的寬度，并轉(zhuǎn)換為int類(lèi)型
var iCurrent = parseInt(getStyle(obj, 'width'));
//計(jì)算其速度
var speed = (iTarget - iCurrent) / 8;
//對(duì)速度進(jìn)行取整，因?yàn)樯厦娴某赡軙?huì)產(chǎn)生小數(shù)點(diǎn)
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//與目標(biāo)值進(jìn)行比較，達(dá)到目標(biāo)值，則取消時(shí)間函數(shù)
if(iCurrent == iTarget){
clearInterval(obj.timer);
}
//未到達(dá)目標(biāo)值，則進(jìn)行改變樣式
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ù)。
實(shí)現(xiàn)動(dòng)畫(huà)：一個(gè)改變div的寬度，一個(gè)改變div的高度，效果如下：
animation.png
實(shí)際上，我們改變寬度的div動(dòng)畫(huà)已經(jīng)實(shí)現(xiàn)了，而對(duì)于改變div的高度也就是將要改變的樣式修改為高度即可：增加了startMove1函數(shù)
window.onload = function () {
//獲取到div元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//設(shè)置鼠標(biāo)事件
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事件，防止鼠標(biāo)多次的移入移出產(chǎn)生異常的效果
clearInterval(obj.timer);
//設(shè)置time事件，每30ms執(zhí)行一次
obj.timer = setInterval(function (){
//獲取到當(dāng)前元素的寬度，并轉(zhuǎn)換為int類(lèi)型
var iCurrent = parseInt(getStyle(obj, 'height'));
//計(jì)算其速度
var speed = (iTarget - iCurrent) / 8;
//對(duì)速度進(jìn)行取整，因?yàn)樯厦娴某赡軙?huì)產(chǎn)生小數(shù)點(diǎn)
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//與目標(biāo)值進(jìn)行比較，達(dá)到目標(biāo)值，則取消時(shí)間函數(shù)
if(iCurrent == iTarget){
clearInterval(obj.timer);
}
//未到達(dá)目標(biāo)值，則進(jìn)行改變樣式
else {
obj.style['height'] = iCurrent + speed + 'px';
}
},30);
}
我們對(duì)比一下startMove函數(shù)和startMove1函數(shù)，實(shí)際上就是改變的樣式不同，一個(gè)改變寬度，一個(gè)改變高度。因此，我們可以修改，將兩個(gè)函數(shù)合并起來(lái)。
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 {
//對(duì)傳入的樣式進(jìn)行改變
obj.style[attr] = iCurrent + speed + 'px';
}
},30);
}
實(shí)際上，修改的部分即含有注釋部分。
完整代碼如下：
<!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è)置鼠標(biāo)事件
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 {
//對(duì)傳入的樣式進(jìn)行改變
obj.style[attr] = iCurrent + speed + 'px';
}
},30);
}
/**
* 封裝一個(gè)函數(shù)用來(lái)獲取樣式
* @param obj 傳入的元素對(duì)象
* @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é)主要學(xué)習(xí)了修改不同樣式的動(dòng)畫(huà)，并做了一定的封裝。注意：對(duì)于重復(fù)的代碼，我們一定要將其合并，使代碼顯得更加整潔。
