js仿土豆視頻滾動菜單

2019-11-21 01:45: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>武林網 m.survivalescaperooms.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>  <div   class="iwvjtn8m0"   id="img_bag">  <a href="javascript:void(0)" onmousedown="moveLeft()"><<</a>  <div   class="iwvjtn8m0"   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()">>></a>  </div>  <div style="clear:both;"></div>  <div   class="iwvjtn8m0"   id="scrollBar">  <div   class="iwvjtn8m0"   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需刷新才能執行]

上一篇：javascript 代碼簡單的管理菜單

下一篇：用javascript獲取textarea中的光標位置