// 1. css样式 div { width: 100px; height: 100px; background: olivedrab; position: absolute; left: 0px; opacity: 1; } .top { top: 100px; } .bottom { top: 300px; }
// html和JavaScript代码 <div class="top"></div> <div class="bottom" style="background-color: coral;"></div> <script> // 多物体多值链式运动框架 // 获取对象样式相对应属性的值 var targetObj = { width: 400, height: 400, opacity: 50, left: 300, top: 200 } // 获取对应的HTML元素 oDivArray = document.getElementsByTagName(‘div‘); // 调用函数 oDivArray[0].onclick = function() { startMove(this, targetObj, function() { startMove(oDivArray[1], targetObj); }); } // 获取元素样式对应的属性值 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return window.getComputedStyle(obj, false)[attr]; } } // 封装动画函数 function startMove(obj, json, callback) { // 清除目标对象的定时器,而非全局 clearInterval(obj, timer); // iSpeed:动画速度,iCur:当前样式属性的值,timer:定时器对象 var iSpeed, iCur, timer; obj.timer = setInterval(function() { var bStop = true; // 标志位,上一个对象的动画是否完成 for (var attr in json) { if (attr === ‘opacity‘) { // 如果获取的是opacity,则乘100倍,否则正常获取值 iCur = parseFloat(getStyle(obj, attr)) * 100; } else { iCur = parseInt(getStyle(obj, attr)); } iSpeed = (json[attr] - iCur) / 7; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //设置动画速度 if (attr == ‘opacity‘) { obj.style.opacity = (iCur + iSpeed) / 100; // 乘100的值还原回去 } else { obj.style[attr] = iCur + iSpeed + ‘px‘; } if (iCur != json[attr]) { // 如果当前属性的值不等于用户穿进来的对象里的属性对应的值,则继续执行动画 bStop = false; } else { // 达到期待的目标,设置标志位为真,即可以停止 bStop = true; } } if (bStop) { clearInterval(obj.timer); //如果标志位为真,则达到用户期待的动画效果 typeof callback == ‘function‘ ? callback() : ‘‘;// 判断用户是否有传入回调函数,有则执行,无则结束。链式动画执行框架 } }, 30) } </script>
end
原文地址:https://www.cnblogs.com/artsmp/p/12043889.html
时间: 2024-10-10 06:02:37