<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getStyle(obj,attr){
if (obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
function animate_arg(obj,json,speed){
for(var attr in json){
var current = parseInt(getStyle(obj,attr));
console.log(attr);
console.log(typeof(attr));
//比如此处传josn{top:500}进来的时候console.log(attr)就是输出top，那下面attr.step json的值传进来就会生成相应的
//width.step,height.step,left.step 但是我实际我attr.step得到的是个未定义的。
attr.step = json[attr]>current ? speed : -speed;
console.log(typeof(attr.step));
attr.timer = setInterval(function(){
var current = parseInt(getStyle(obj,attr));
var result = Math.abs(json[attr] - current);
if (result <= speed){
obj.style[attr]=json[attr];
}else{
obj.style[attr]= current + attr.step + "px";
}
},30)
}
}
window.onload=function(){
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var box = document.getElementById("box");
btn200.onclick = function() {
animate_arg(box,{width: 200, top: 800,left: 200},10);
};
btn400.onclick = function() {
animate_arg(box,{top:500},10);
}
}
</script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
添加回答
举报
0/150
提交
取消