代码
<!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>
效果
