代码
<!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: 150px;
height: 150px;
background: darkcyan;
opacity: 0.2;
position: absolute;
border: 2px solid #ccc;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.onclick = function () {
run(box, { // 将多个元素属性作为对象方式传进来
'width': 400,
'height': 400,
'opacity': 100
});
}
function run(ele, json) { // json 对象
clearInterval(ele.timer);
ele.timer = setInterval(function () { // 开启每个元素自己的定时器
var tag = true; // 开关标志
for (var i in json) { // i:属性名 json[i]:属性值
if (i == 'opacity') {
var cur = parseFloat(getStyle(ele, i)) * 100; // 透明度
} else {
var cur = parseInt(getStyle(ele, i)); // 大小，位置等 当前值
}
// （目标值 - 当前值）/ 缩放比例
var speed = (json[i] - cur) / 10; // 变速
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 向右走 变速正，需要向上取整，反之向左走 变速负数，需要向下取整
if(cur != json[i]){ // 当前值未达到目标值时
tag = false;
}
// 赋值
if (i == 'opacity') { // 透明度赋值
ele.style[i] = (cur + speed) / 100;
} else {
ele.style[i] = cur + speed + 'px';
}
if(tag){
clearInterval(ele.timer);
}
}
}, 50)
}
// 获取元素非行间样式
function getStyle(ele, attr) {
if (window.getComputedStyle) { // 标准
return getComputedStyle(ele)[attr];
} else { // ie
return ele.currentStyle[attr];
}
}
</script>
</body>
</html>
效果
