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

最新推荐文章于 2021-07-26 22:52:07 发布

vcxiaohan2

最新推荐文章于 2021-07-26 22:52:07 发布

阅读量331

点赞数

分类专栏： javascript实例

本文链接：https://blog.csdn.net/u011500781/article/details/47354813

版权

javascript实例专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>

vcxiaohan2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
合并运动及透明度框架(含json)

Demo *{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:
复制链接

扫一扫