菜鸟写的网页滚动效果

2024-09-05 12:18:12

字体：大中小

来源：转载

供稿：网友

菜鸟写的网页滚动效果，点击元素后，网页向上滚动，初学者所写，还不是很完善，兼容性也不到位，先分享给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><title>菜鸟写的网页滚动效果</title><style type="text/css">*{	margin:0;	padding:0;}.page960{	width:960px;	margin:auto;}.mainDiv{	width:960px;	margin:auto;}.div_menu{	float:left;	display:inline;	width:95px;	border:1px solid #ccc;	border-right:none;	cursor:pointer;}.div_menu span{	width:93px;	height:60px;	display:block;	line-height:60px;	text-align:center;	margin:1px;	background:#9FC;}.main_content{	float:left;	display:inline;	width:860px;	border:1px solid #ccc;	height:800px;	margin-bottom:12px;}</style></head><body><div class="page960" style="height:200px;">head</div><div class="mainDiv">	<div class="div_menu">    	<span onclick="divMove(0)">1</span>        <span onclick="divMove(1)">2</span>        <span onclick="divMove(2)">3</span>    </div>    <div class="main_content">test1</div></div><div class="mainDiv">	<div class="div_menu">    	<span onclick="divMove(0)">1</span>        <span onclick="divMove(1)">2</span>        <span onclick="divMove(2)">3</span>    </div>    <div class="main_content">test2</div></div><div class="mainDiv">	<div class="div_menu">    	<span onclick="divMove(0)">1</span>        <span onclick="divMove(1)">2</span>        <span onclick="divMove(2)">3</span>    </div>    <div class="main_content">test3</div></div><script type="text/javascript">var currentpos,timer;var myDiv=new Array();var j=0;var k=0;var n=0;var timer=null;var speed=0;allDiv=document.getElementsByTagName("div");/*假如是ie8或者是火狐*/if(navigator.appVersion.indexOf("7.0")==-1&&navigator.appVersion.indexOf("6.0")==-1){	for(j=0;jcurrentPos)	{		moveDown();	}	if(myElement.offsetTop<currentPos)	{		moveUp();	}}//向下移动function moveDown(){ 	timer=setInterval("scrollDown()",10);}function scrollDown() {	if(Math.ceil(currentPos)>=myElement.offsetTop)	{		sc();		timer=null;		speed=0;	}	else	{		speed=(myElement.offsetTop-currentPos)/15;		currentPos=currentPos+speed;		window.scroll(0,currentPos); 		}}//向上移动function moveUp(){ 	timer=setInterval("scrollUp()",10);} function scrollUp() {	if(Math.round(currentPos)<=myElement.offsetTop)	{		sc();		timer=null;		speed=0;	}	else	{		speed=(myElement.offsetTop-currentPos)/15;		currentPos=currentPos+speed;		window.scroll(0,currentPos); 		}}//停止移动function sc(){	clearInterval(timer); 	timer=null;}</script></body></html>

上一篇：Js仿微博插入话题功能

下一篇：网页上的下拉缓冲JS效果代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注