合并运动及透明度框架(含json)

来源：互联网发布：cf透视源码2015 编辑：程序博客网时间：2024/06/08 05:37
<!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.onload=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>
0 0