//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; }
//变速动画函数封装增加任意多个属性和回调函数及层级还有透明度 //element元素 json对象 存储属性与值 fn为回调函数 function animate(element, json, fn) { //清理定时器 clearInterval(element.timeid); //设置定时器 element.timeid = setInterval(function () { //假设全部到达目标 var f = true; //循环去获取传入的数据 for (var i in json) { //判断传入的值 是不是opacity if (i == 'opacity') { //获取当前opacity的值 并且放大100倍 var current = getStyle(element, i) * 100; //把目标值也放大100倍 var target = json[i] * 100; //移动的步数 var step = (target - current) / 10; //判断是不是为0 step = step > 0 ? Math.ceil(step) : Math.floor(step); //移动后的位置 current += step; //移动元素属性 element.style[i] = current / 100; //判断属性是不是zIndex } else if (i == 'zIndex') { //直接设置zIndex element.style[i] = json[i]; } else { //普通属性获取（转化成数字） var current = parseInt(getStyle(element, i)); //目标属性值 var target = json[i] //移动的步骤（渐变） var step = (target - current) / 10; //判断移动的值取整 step = step > 0 ? Math.ceil(step) : Math.floor(step); //移动后的位置 current += step; //移动元素 element.style[i] = current + 'px'; } //只要有一个没达到目标就设置F为false if (current != target) { f = false; } //目标到达 清理定时器 判断有没有回调函数 if (f) { clearInterval(element.timeid); if (fn) { fn(); } } } console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20) }
总结
以上所述是小编给大家介绍的JavaScript变速动画函数封装添加任意多个属性，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: