html语言鼠标经过怎么变宽,JS实现多个Div,鼠标移入变宽

Document

div {

width: 100px;

height: 30px;

background: red;

margin: 10px;

}

window.onload = function() {

var oDiv = document.getElementsByTagName('div'); //获取所有的div

for (let i = 0; i < oDiv.length; i++) { //循环出所有的div

oDiv[i].time = null; //给每个div加一个定时器。解决：单个定时器，出现的问题

oDiv[i].onmouseover = function() {

starMove(this, 400);

};

oDiv[i].onmouseout = function() {

starMove(this, 100)

}

}

}

function starMove(obj, iTarget) {

clearInterval(obj.time); //停止每个div的定时器

obj.time = setInterval(function() {

var speed = (iTarget - obj.offsetWidth) / 6; //div的运行速度

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //速度值的上下取整

if (obj.offsetWidth == iTarget) { //判断div的宽度是否等于目标点

clearInterval(obj.time); //如果等于目标点就清除定时器

} else {

//反之

obj.style.width = obj.offsetWidth + speed + 'px';

}

}, 30)

}