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需再刷新一下页面才能执行]

您可能感兴趣的文章:

CSS鼠标悬停菜单图片交换技术实现
这是一个使用了图片交换技术制作的CSS鼠标悬停菜单，也就是大家所说的鼠标经过换色，不过本例中的菜单并没有使用纯CSS来实现背景换色，这里将用一幅图片替换了背景色，因为主要是想让大家了解CSS对背景图片控制的技巧
2009-11-11
js无限级折叠菜单精简版
一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。
2011-03-03
点击后慢慢弹出下拉菜单效果代码(栏目管理常用)
点击后慢慢弹出下拉菜单，sky整理收集。
2010-07-07
CSS 伪类实现的鼠标滑动图片链接
CSS伪类实现的鼠标滑动链接，是一个图片导航，在早期的DW中有专一制作本效果的插件，不过随着大家CSS水平的提高，现在做出这种效果好像得心应手了，因为这种果大家应该都挺喜欢的。
2009-10-10
javascript实现的鼠标悬停时动态翻滚的导航条
鼠标悬停时动态翻滚的导航条，注意这里用了两个背景图，请等待网页加载完成或多刷新几次，这个是使用JavaScript实现的，不过代码好像是从jQuery里摘出来的，有点像。
2009-11-11
超酷的鼠标拖拽翻页(分页)效果实现javascript代码
超酷的鼠标拖拽翻页(分页)效果实现javascript代码,非常的不错。
2009-09-09
利用js跨页面保存变量做菜单的方法
2008-01-01
超个性的导航效果
超个性的导航效果...
2007-11-11
javascript实现的又一个不错的滑动导航效果
javascript实现的又一个不错的滑动导航效果...
2007-04-04
通用的二级菜单代码(css+javascript)
前几天做网站使用到二级菜单，想也没想就在网上当了几个，不过大多都不太满意，只有《CSS二级菜单》看上去似乎好一点，就使用了那个。
2009-07-07

js仿土豆视频滚动菜单

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具