代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:100px;
height:100px;
float:left;
background:slateblue;
margin:30px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
var box = document.getElementsByClassName('box');
for(var i=0;i<box.length;i++){
box[i].onmouseover = function(){
run(this,'height',500,10)
}
box[i].onmouseout = function(){
run(this,'height',100,10)
}
}
function run(ele,attr,target,param) {
clearInterval(ele.timer);
ele.timer = setInterval(function () { // 开启每个元素自己的定时器
if(attr == 'opacity'){
var cur = parseFloat(getStyle(ele, attr)) * 100; // 透明度
}else{
var cur = parseInt(getStyle(ele, attr)); // 大小，位置等 当前值
}
// （目标值 - 当前值）/ 缩放比例
var speed = (target - cur) / param; // 变速
speed = speed > 0? Math.ceil(speed) : Math.floor(speed); // 向右走 变速正数，需要向上取整，反之向左走 变速负数，需要向下取整
if (cur >= target&& speed>0 || cur<=target && speed<0) {
cur = target;
clearInterval(ele.timer);
}
if(attr == 'opacity'){ // 透明度赋值
ele.style[attr] = (cur + speed) / 100;
}else{
ele.style[attr] = cur + speed + 'px';
}
}, 50)
}
// 获取元素非行间样式
function getStyle(ele, attr) {
if (window.getComputedStyle) { // 标准
return getComputedStyle(ele)[attr];
} else { // ie
return ele.currentStyle[att];
}
}
</script>
</body>
</html>
效果
