上一次写了一个用定时器来实现一个进度条，今天再来写一个用定时器来控制多个DOM元素的宽度变化。
创建DOM元素
<body>
<div></div>
<div></div>
<div></div>
<div></div>/*创建多个DOM元素，这里以4个为例*/
</body>
对DOM元素进行修饰
<style type="text/css">
div{
width: 100px;
height: 40px;
background: red;
margin: 10px 0;
}/*四个（多个）初始宽度为100像素（为方便观察，也可以设置为0），高度为40像素，背景颜色为红色的对象*/
</style>
开始控制DOM元素宽度的变化
<script type="text/javascript">
//我们设定宽度的目标值为300
let aDivs = document.querySelectorAll("div");//获取所有的div元素
let iTarget1 = 300;//设定目标宽度值为300
let iTarget2 = 100;//初始值为100
for(let i = 0; i < aDivs.length; i++){//for循环遍历获取到的所有div元素
aDivs[i].onmouseover = function(){//当鼠标移入时触发该函数
clearInterval(aDivs[i].timer);//清除掉上一个定时器，如果有的话。
aDivs[i].timer = setInterval(function(){//设置定时器
let iCur = parseInt(getStyle(aDivs[i],"width"));//获取当前DOM节点的宽度
let iSpeed = Math.ceil((iTarget1-iCur)/8);//目标值与当前值的插值除以八，宽度每一次变化的值
aDivs[i].style.width = iCur + iSpeed + "px";//目标宽度每一次变化之后的宽度值等于变化前的值与宽度变化值之和。
if(iCur==iTarget1){//当DOM元素宽度等于目标值时
clearInterval(aDivs[i].timer);//清楚定时器
}
},20);//每20毫秒运行一次定时器，也就是DOM元素的宽度值发生一次变化
}
aDivs[i].onmouseout = function(){//鼠标移出时触发该函数
clearInterval(aDivs[i].timer);//清除上一个定时器，如果有的话。
aDivs[i].timer = setInterval(function(){//设置定时器
let iCur = parseInt(getStyle(aDivs[i],"width"));//获取当前DOM元素的宽度
let iSpeed = Math.floor((iTarget2-iCur)/8);//目标值与当前值的插值除以八，宽度每一次变化的值（注意与上一个定时器上目标值和当前值的不同。）
aDivs[i].style.width = iCur + iSpeed + "px";//当DOM元素宽度等于目标值时
if(iCur == iTarget2){//当DOM元素宽度等于目标值时（恢复到初始状态时）
clearInterval(aDivs[i].timer);//清除定时器
}
},20);//每二十毫秒运行一次这个定时器
}
}
function getStyle(domobj,attr){//获取DOM元素属性值的函数
if(window.getComputedStyle){//可以获取到内联样式、嵌入样式和外部样式
return getComputedStyle(domobj,null)[attr];//返回domobj元素的attr属性值
}
return domobj.currentStyle[attr];函数返回目标元素的attr属性值
}
</script>
这样我们就实现了在一个页面中，通过鼠标移入、移出来改变节点的宽度。
网友评论