js仿土豆视频滚动菜单_导航菜单

2020-11-27 来源：乌哈旅游

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>脚本之家 www.gxlcms.com 仿土豆视频滚动菜单</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> 
 
<< 
 
 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
 
 
>> 
 
 
 
 
 
<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仿土豆视频滚动菜单_导航菜单