纯js练习换屏

<!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>
</head>
<style type="text/css">
body{ padding:0px; margin:0px; border:0px;}

div:nth-child(1){ background:#066;}
div:nth-child(2){ background:#6C3; }
div:nth-child(3){ background:#960;}
div:nth-child(4){ background:#F0F;}
div:nth-child(5){ background:#FC6;}
div{ font-size:400px; line-height:300%; color:#FFF; text-align:center;}

span{ position:fixed; right:10px; top:50%; display:block; width:40px; height:220px;}
span a{ display:inline-block; width:30px; height:30px; margin:5px; background:#9C0; text-align:center; line-height:30px; cursor:pointer; }
</style>


<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<span><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a></span>
<script type="text/javascript">

var topheight=document.documentElement.clientHeight || document.body.clientHeight;
var num=0;
var div=document.getElementsByTagName("div");
var t;
var indexid=0;
var h=0;;
for(var h=0; h<div.length;h++)
{
div.item(h).style.height=topheight+"px";
}

var span=document.getElementsByTagName("span");

//alert(span.item(0).childNodes.item(0).innerHTML);
for(var i=0;i<span.item(0).childNodes.length;i++)
{
span.item(0).childNodes.item(i).index=i;
span.item(0).childNodes.item(i).onclick=function(){
indexid=this.index;
h=topheight*indexid;
Top(indexid);
}

}

function Top(n)
{


Animate(num);
if(num>h)
{

clearTimeout(t);
}
else
{
t=setTimeout(Top,0.00001);
}

num=num+1;
}


function Animate(num)
{
document.documentElement.scrollTop = document.body.scrollTop =num;

}

 


</script>
</body>
</html>

posted @ 2015-09-25 00:13  luoyiming  阅读(82)  评论(0)    收藏  举报