首页 > 网络编程 > JavaScript > 网页特效 > 导航菜单 > js滚动菜单

js仿土豆视频滚动菜单

2008-05-07 19:22:35 作者：

比较漂亮的仿土豆视频导航菜单，漂亮大方

<!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=gb2312" />  
<title>脚本之家 www.jb51.net 仿土豆视频滚动菜单</title>  
<style>  
ul{margin:0;padding:0;list-style:none;width:100000px}  
li{margin:0;padding:0;width:100px;height:100px;display:block;float:left;margin-right:5px;background:#009900}  
#img_bag{width:640px;height:100px;background:#FF9900;margin:0 auto;}  
#img_bag a{float:left;width:20px;display:block;height:20px;font-weight:bold;}  
#img_bag #img{width:600px;height:100px;background:#ccc;overflow:hidden;float:left}  
#scrollBar{width:600px;height:20px;background:#FF0000;margin:0 auto;position:relative}  
#scroll{width:30px;height:20px;background:#000;cursor:pointer;position:absolute;}  
</style>  
</head>  
<body>  
<div id="img_bag">  
<a href="javascript:void(0)" onmousedown="moveLeft()">&lt;&lt;</a>  
<div id="img">  
<ul>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
</ul>  
</div>  
<a href="javascript:void(0)" onmousedown="moveRight()">&gt;&gt;</a>  
</div>  
<div style="clear:both;"></div>  
<div id="scrollBar">  
<div id="scroll" style="left:0"></div>  
</div>  
<script>  
function $(obj){return document.getElementById(obj)}  
var maxWidth=$("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105;  
var isScroll=false;  
var modiLeft;  
$("scroll").onmousedown=function(evt){  
isScroll=true;  
evt=(evt)?evt:((window.event)?window.event:null);  
if(evt.offsetX){  
modiLeft=parseInt(evt.offsetX)  
}  
else{modiLeft=parseInt(evt.layerX)}  
}  
document.onmouseup=function(){  
isScroll=false;  
}  
document.onmousemove=function(evt){  
evt=(evt)?evt:((window.event)?window.event:null);  
if(evt&&isScroll){  
$("scroll").style.left=parseInt(evt.clientX)-parseInt($("scrollBar").offsetLeft)-modiLeft+"px";  
if(parseInt($("scroll").style.left)<0){$("scroll").style.left=0+"px"}  
if(parseInt($("scroll").style.left)>570){$("scroll").style.left=570+"px"}  
$("img").scrollLeft=parseInt($("scroll").style.left)*((maxWidth-600)/570);  
  }  
}  
var targetx = 200;//一次滚动距离  
var dx;  
var a=null;  
function moveLeft(){  
var le=parseInt($("img").scrollLeft);  
if(le>200){  
targetx=parseInt($("img").scrollLeft)-200;  
}  
else{targetx=parseInt($("img").scrollLeft)-le-1}  
scLeft();  
}  
function scLeft(){  
dx=parseInt($("img").scrollLeft)-targetx;  
$("img").scrollLeft-=dx*.3;  
$("scroll").style.left=parseInt($("img").scrollLeft)*(570/(maxWidth-600))+"px";  
if(parseInt($("scroll").style.left)<0){$("scroll").style.left=0+"px"}  
if(parseInt($("scroll").style.left)>570){$("scroll").style.left=570+"px"}  
clearScroll=setTimeout(scLeft,50);  
if(dx*.3<1){clearTimeout(clearScroll)}  
}  
function moveRight(){  
var le=parseInt($("img").scrollLeft)+200;  
var maxL=maxWidth-600;  
if(le<maxL){  
targetx=parseInt($("img").scrollLeft)+200;  
}  
else{targetx=maxL}  
scRight();  
}  
function scRight(){  
dx=targetx-parseInt($("img").scrollLeft);  
$("img").scrollLeft+=dx*.3;  
$("scroll").style.left=parseInt($("img").scrollLeft)*(573/(maxWidth-600))+"px";  
if(parseInt($("scroll").style.left)<0){$("scroll").style.left=0+"px"}  
if(parseInt($("scroll").style.left)>=570){$("scroll").style.left=570+"px"}  
a=setTimeout(scRight,50);  
if(dx*.3<1){clearTimeout(a)}  
}  
</script>  
</body>  
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js仿土豆视频滚动菜单

您可能感兴趣的文章: