上节课 我们讲解了如何获取到非行内样式，并完成了一个简单的div宽度变化，现在我们继续完善，实现如下效果：
animation.png
实现过程：
a. 设置其鼠标的移动事件：
window.onload = function () {
//获取到div元素
var div1 = document.getElementById("div1");
//设置鼠标事件
div1.onmouseover = function () {
startMove(this, 400);
};
div1.onmouseout = function () {
startMove(this, 200);
}
};
b. 获取到元素样式函数：
function getStyle(obj, attr) {
//判断是否支持currentStyle属性，若为IE则支持
if (obj.currentStyle){
//返回该样式
return obj.currentStyle[attr];
}
//若不支持，则使用getComputedStyle方法，使得火狐和谷歌支持
else {
return getComputedStyle(obj, null)[attr];
}
}
实现运动事件：
function startMove(obj,iTarget) {
//取消其他time事件，防止鼠标多次的移入移出产生异常的效果
clearInterval(obj.timer);
//设置time事件，每30ms执行一次
obj.timer = setInterval(function (){
//获取到当前元素的宽度，并转换为int类型
var iCurrent = parseInt(getStyle(obj, 'width'));
//计算其速度
var speed = (iTarget - iCurrent) / 8;
//对速度进行取整，因为上面的除法可能会产生小数点
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//与目标值进行比较，达到目标值，则取消时间函数
if(iCurrent == iTarget){
clearInterval(obj.timer);
}
//未到达目标值，则进行改变样式
else {
obj.style['width'] = iCurrent + speed + 'px';
}
},30);
}
关于ceil()函数 和 floor()函数：
Math.ceil(x) : 返回大于等于x，并且与它最接近的整数。
Math.floor(x)：小于等于x，并且与x最接近的整数。
实现动画：一个改变div的宽度，一个改变div的高度，效果如下：
animation.png
实际上，我们改变宽度的div动画已经实现了，而对于改变div的高度也就是将要改变的样式修改为高度即可：增加了startMove1函数
window.onload = function () {
//获取到div元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//设置鼠标事件
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事件，防止鼠标多次的移入移出产生异常的效果
clearInterval(obj.timer);
//设置time事件，每30ms执行一次
obj.timer = setInterval(function (){
//获取到当前元素的宽度，并转换为int类型
var iCurrent = parseInt(getStyle(obj, 'height'));
//计算其速度
var speed = (iTarget - iCurrent) / 8;
//对速度进行取整，因为上面的除法可能会产生小数点
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//与目标值进行比较，达到目标值，则取消时间函数
if(iCurrent == iTarget){
clearInterval(obj.timer);
}
//未到达目标值，则进行改变样式
else {
obj.style['height'] = iCurrent + speed + 'px';
}
},30);
}
我们对比一下startMove函数和startMove1函数，实际上就是改变的样式不同，一个改变宽度，一个改变高度。因此，我们可以修改，将两个函数合并起来。
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参数，表示要改变的样式
function startMove(obj,iTarget,attr) {
clearInterval(obj.timer);
obj.timer = setInterval(function (){
//传入样式参数
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");
//设置鼠标事件
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参数，表示要改变的样式
function startMove(obj,iTarget,attr) {
clearInterval(obj.timer);
obj.timer = setInterval(function (){
//传入样式参数
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);
}
/**
* 封装一个函数用来获取样式
* @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>
总结：
这一节主要学习了修改不同样式的动画，并做了一定的封装。注意：对于重复的代码，我们一定要将其合并，使代码显得更加整洁。
网友评论