刚开始学习js，今天写了一个关于鼠标移上去框就会增长的小案例。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="cebianline.js" type="text/javascript" charset="utf-8" async defer></script>
<style>
div{
width: 100px;
height: 50px;
background: green;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>js：
window.onload=function () {
var div1=document.getElementsByTagName('div');
for (var i = 0 ; i < div1.length; i++) {
div1.timer=null;
div1[i].onmouseover=function(){
move(this,400);
}
div1[i].onmouseout=function(){
move(this,100);
}
}
}
//var timer=null;
function move (obj,targe) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var speed=(targe-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==targe)
{
clearInterval(obj.timer);
}
else {
obj.style.width = obj.offsetWidth+speed+'px';
}
}, 30);
}