<!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) {
//定义unit
var 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>
3355
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
