js仿土豆視頻滾動(dòng)菜單

更新時(shí)間：2008年05月07日 19:22:35 作者：

比較漂亮的仿土豆視頻導(dǎo)航菜單，漂亮大方

<!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.dhdzp.com 仿土豆視頻滾動(dòng)菜單</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   class="sm6kcwc"   id="img_bag">  <a href="javascript:void(0)" onmousedown="moveLeft()">&lt;&lt;</a>  <div   class="qi8wqkw"   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   class="yc8i8ag"   id="scrollBar">  <div   class="qiyewos"   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;//一次滾動(dòng)距離  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需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: