JavaScript 多个属性一起变化

来源：互联网发布：人工智能的基金有哪些编辑：程序博客网时间：2024/06/07 05:43
<!DOCTYPE html><html><head><title>运动效果</title><meta charset="utf-8" /></head><style>div {width: 150px;height: 150px;background: aliceblue;opacity: 1;border-radius:75px;}</style><script>window.onload = function(){var oDiv = document.getElementsByTagName('div')[0];oDiv.onclick = function(){mixedAnimation(this,{"width":500,"height":500,"opacity":0.5,"border-radius":250},2000);}function mixedAnimation(obj,options,time){//记录所有的起始属性var start = [];//记录所有属性的变量量var delta = [];//循环遍历 for (var name in options) {//将所有的起始属性，保存在start[]数组中start[name] = parseFloat(getStyle(obj,name));//将所有属性的变化量，保存在delta[]数组中delta[name] = options[name] - start[name];}//计算变换的总次数（向上取整）var total = Math.ceil(time/30);//记录现在的变换次数是哪一次var count = 0;var timer = setInterval(function(){//记录 变化次数count++;for (var name in options) {//定义unitvar unit = 'px';if(name == 'opacity') {unit = '';}//如果是最后一次变化if (count == total) {obj.style[name] = options[name] + unit;} else {obj.style[name] = start[name]+delta[name]*count/total + unit;}}if (count == total){clearInterval(timer);timer = null;}},30);}function getStyle(obj, attr){if (typeof(obj.currentStyle) == 'undefined') {return getComputedStyle(obj,null)[attr];}return obj.currentStyle[attr];}}</script><body><div></div></body></html>
0 0