有什么办法能简化这个代码吗？-慕课网

有什么办法能简化这个代码吗？

来源：4-1 JS多物体动画

OneMagic

2017-05-08 19:27

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>more</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}

ul,
li {
list-style: none;
}

ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
}


div {
width: 200px;
height: 200px;
background: red;
margin: 20px;
float: left;
/*IE下的滤镜*/
filter: alpha(opacity:30);
/*其它浏览器透明度*/
opacity: 0.3;
}
</style>

<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

<div></div>
<div></div>
<div></div>
<div></div>
</body>
<script>
window.onload = function () {

//只要是多物体运动，所有的东西都不能公用

var aLi = document.getElementsByTagName('li'),
aDiv = document.getElementsByTagName('div');
// li的变宽动画
for (var i = 0; i < aLi.length; i++) {
// 防止全局定时器变量污染 互相争用定时器 给每一个Li一个定时器
aLi[i].timer = null;
aLi[i].onmouseover = function () {
startMove(this, 400);
}
aLi[i].onmouseout = function () {
startMove(this, 200);
}
}
// div的透明度
for (var j = 0; j < aDiv.length; j++) {
aDiv[j].timer = null;
// 透明度也要防止污染
aDiv[j].alpha = 30;
aDiv[j].onmouseover = function () {
startChange(this, 100);
}
aDiv[j].onmouseout = function () {
startChange(this, 30);
}
}
}

// var timer = null;
// 变宽动画方法 传入两个函数 （this-obj ， iTarget）
function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 判断速度值
var speed = (iTarget - obj.offsetWidth) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetWidth == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.width = obj.offsetWidth + speed + 'px';
}
}, 30);
}

// 透明度动画方法
function startChange(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 判断速度值
var speed = 0;
var speed = 0;
// 判断速度的值
if (obj.alpha > iTarget) {
speed = -10;
} else {
speed = 10;
}
if (obj.alpha == iTarget) {
clearInterval(obj.timer);
} else {
// 给透明值赋值
obj.alpha = obj.alpha + speed;
// IE下滤镜
obj.style.filter = 'alpha(opacity:"+obj.alpha+")';
// 其它浏览器透明度
obj.style.opacity = obj.alpha / 100;
}
}, 30);

}
</script>

</html>

写回答关注