最新消息:网站改版咯

javascript飞入效果

ECMAScript Yovae 1157浏览

分享一个我自己编写的javascript程序,实现的是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 type="text/css">
div {
	padding:0 5px;
}
#nav {
	background-color:#ccc;
	width:100px;
	cursor:pointer;
}
#div1 {
	background-color:#00f;
	color:#fff;
	font-size:larger;
	position:absolute;
	width:400px;
	height:200px;
	left:-410px;
	top:-400px;
}
#div2 {
	background-color:#ff0;
	color:#fff;
	font-size:larger;
	position:relative;
	width:400px;
	height:200px;
	left:-410px;
	top:-400px;
	z-index:4;
}
#div3 {
	background-color:#f00;
	color:#fff;
	font-size:larger;
	position:fixed;
	width:400px;
	height:200px;
	left:-410px;
	top:-400px;
}
</style>
<script type="text/javascript">
//<![CDATA[
 var slides=["div1","div2","div3"];
 var x=0;
 var y=0;
 var currentSlide=0;
 window.onload=function(){
	 document.getElementById("nav").onclick=nextSlide;
	 }
 function nextSlide(){
	 setTimeout("moveBlock()",1000);
	 }
function moveBlock(){
	x+=20;
	y+=20;
	var obj=document.getElementById(slides[currentSlide]);
	obj.style.top=x+"px";
	obj.style.left=y+"px";
	if(x<(100+currentSlide*90))
	{
		setTimeout("moveBlock()",100);
	}
	else{
	    currentSlide++;
		x=0;y=0;	
		}
		if(currentSlide>=slides.length)
		{
			document.getElementById("nav").onclick=null;
		}
	}
//]]>
</script>
</head>

<body>
<div id="nav">
  <p>Next Slide</p>
</div>
<div id="div1">
  <p>Blue block is absolutely positioned.</p>
</div>
<div id="div2">
  <p>Yellow block that is relatively poisiitioned.and given a z-index of 4</p>
</div>
<div id="div3">
  <p>Red block that has fixed positioned.</p>
</div>
</body>
</html>

转载请注明:Yovae Studio » javascript飞入效果