js 动画1

div速度 运动：

代码例如以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>速度 运动</title>
<style>
body{paddiing:0;margin:0}
#div1{width:200px; height:200px;background-color:red; position:relative;left:-200px; top:0;}
#div1 span{width:20px;height:50px; background-color:blue;position:absolute; left:200px; top:75px}
</style>
<script>

window.onload = function(){
	var oDiv = document.getElementById('div1');
	oDiv.onmouseout = function(){
		startMove(-200);
	}
	oDiv.onmouseover = function(){
		startMove(0);
	}
}
var timer = null;
function startMove(seat){
	clearInterval(timer);
	var oDiv = document.getElementById('div1');
	timer = setInterval(function(){
		if(oDiv.offsetLeft > seat){
			speed = -10;
		}
		else{
			speed = 10;
		}
		if(oDiv.offsetLeft == seat){
			clearInterval(timer)
		}
		else{
			oDiv.style.left = oDiv.offsetLeft + speed +'px';
		}
	},30)
		
}
</script>
</head>

<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>

透明度运动：

代码例如以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透明度运动</title>
<style>
body{
	padding:0;
	margin:0
}
#div1{
	width:200px;
	height:200px;
	background:red;
	filter:alpha(opacity:30);
	opacity:0.3;
}
</style>
<script>


window.onload = function(){
	var oDiv = document.getElementById('div1');
	oDiv.onmouseover = function(){
		startMove(100);
	}
	oDiv.onmouseout = function(){
		startMove(30);
	}
}
var timer = null;
var alpha = 30;
function startMove(seat){
	clearInterval(timer);
	var oDiv = document.getElementById('div1');
	timer = setInterval(function(){
		if(alpha > seat){
			speed = -10;
		}
		else{
			speed = 10;
		}
		if(alpha == seat){
			clearInterval(timer);
		}
		else{
			alpha += speed;
			oDiv.style.filter = 'alpha(opacity:'+alpha+')';
			oDiv.style.opacity = alpha/100;
		}
	},30)
}

</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>


posted @ 2017-06-22 09:31  mfmdaoyou  阅读(110)  评论(0)    收藏  举报