//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 ???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) ???}
js 变速动画函数
原文地址:https://www.cnblogs.com/wanguofeng/p/10647229.html