<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Demo</title>
<link rel="icon" href="images/2.jpg" />
<style>
*{margin:0;padding:0;}
html,body{width:100%;height:100%;}
body{height:1000px;}
#div1{width:100px;height:100px;background-color:#660099;position:absolute;left:0px;top:0px;}
#div2{width:100px;height:100px;background-color:#66ccff;position:absolute;left:200px;top:0px;}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<script>
window.οnlοad=function(){
addPic();
}
function addPic(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var json1={width:200,height:200,opacity:10};
var json2={width:100,height:100,opacity:100};
onMove(div1,json1,5,function(){
onMove(div1,json2,5)
});
onMove(div2,json1,5,function(){
onMove(div2,json2,5)
});
}
function onMove(obj,json,iSpeed,fn){
var timer=null;
var pos=0;
var a=0;
var value=0;
var onoff=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
onoff=true;
for(var index in json){/*传递属性从这边开始*/
value=json[index];
if(index=="opacity"){
pos=(getStyle(obj,index)).toFixed(2)*100;
}else{
pos=getStyle(obj,index)
}
if(pos<value){
a=Math.ceil((value-pos)/iSpeed);
}else{
a=Math.floor((value-pos)/iSpeed);
}
if(pos!=value){
onoff=false;
}
if(onoff){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(index=="opacity"){
obj.style[index]=(pos+a)/100;
}else{
obj.style[index]=pos+a+"px";
}
}
}
},50)
}
function getStyle(obj,attr){
return parseFloat((getComputedStyle(obj,null)[attr]));
}
</script>
</body>
</html>
合并运动及透明度框架(含json)
最新推荐文章于 2024-08-29 14:44:31 发布