最终版：多对象，多属性，链式运动框架(运动队列) 参数一：对象名 参数二：属性，目标值 键名：属性名，键值：目标值 {'width':200,'heigth':400} 实现：宽度和高度一起改变，宽度变成200，高度变成400 参数三：回调函数(可选参数) 里面调用的css（）函数是封装的，具体可以去看我的css()封装的内容 function startMove(ele, opt, fn) { //清定时器防止叠加 clearInterval(ele.timer); //为每个对象绑定定时器 ele.timer = setInterval(function () { //做判断开关 var istrue = false; //遍历可执行多属性 for (var key in opt) { //初始值 var cur = 0; //当属性为透明度时执行这里 if (key == 'opacity') { //获取当前透明度并乘100，好计算速度 cur = ele.style.opacity * 100; } else { //若为其他属性 width height left top。。。获取当前属性值 cur = parseInt(css(ele, key)); } //计算运动速度，目标值-当前值，目标值大于当前值为正，反之为负 var speed = (opt[key] - cur) / 4; //去小数取整，防止运动最后的抖动 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //判断是否达到目标值，达到开关为true if (cur == opt[key]) { istrue = true; } else { istrue = false; } //判断 if (key == 'opacity') { //为普通浏览器时透明度为0-1所以除于100，会成功执行这句 ele.style.opacity = (cur + speed) / 100; //ie低版本执行这句取值为0-100 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')'; } else { //其他属性执行这里，速度+当前属性值，通过速度的正负达到去和回的效果，透明度也是如此 ele.style[key] = speed + cur + 'px'; } } //判定成立清理定时器，并判断是否有回调函数有则调用执行 if (istrue) { clearInterval(ele.timer); if (fn) { fn(); } } }, 30); }
转载于:https://www.cnblogs.com/muyun123/p/11503467.html
相关资源：JAVA上百实例源码以及开源项目