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 全兼容可高亮二级缓冲折叠菜单
最近一段时间一直比较忙，已经有好几个月没有打理博客了。现将一个最近在项目中制作的一个菜单实例整理出来，共享一下。
2010-06-06
点击后慢慢弹出下拉菜单效果代码(栏目管理常用)
点击后慢慢弹出下拉菜单，sky整理收集。
2010-07-07
css 有弹动效果的网页导航
发了个韩国网站（www.firstkids.co.kr）给我，让我用CSS写一个类似这个网站的导航栏效果。思路是：背景图像定位！
2009-10-10
JavaScript CSS 菜单功能代码
CSS 菜单功能,多浏览器兼容性好
2008-12-12
JAVASCRIPT 点击显示隐藏层
用js实现的点击显示与隐藏层的代码。主要是用于一些tab切换类
2009-06-06
搜集了几个不错的下拉菜单效果
搜集了几个不错的下拉菜单效果...
2007-05-05
用js实现的比较经典实用的触发型导航菜单
用js实现的比较经典实用的触发型导航菜单...
2007-03-03
几个不错的自动收缩菜单导航效果
几个不错的自动收缩菜单导航效果...
2007-10-10
CSS鼠标悬停菜单图片交换技术实现
这是一个使用了图片交换技术制作的CSS鼠标悬停菜单，也就是大家所说的鼠标经过换色，不过本例中的菜单并没有使用纯CSS来实现背景换色，这里将用一幅图片替换了背景色，因为主要是想让大家了解CSS对背景图片控制的技巧
2009-11-11
腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二
腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二...
2007-03-03