真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條-創(chuàng)新互聯(lián)

這篇文章主要介紹如何基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比羅莊網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式羅莊網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋羅莊地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

可直接使用的js滾動(dòng)條，先看看效果圖：

如何基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條

代碼如下




 
 自定義滾動(dòng)條


滾動(dòng)條

*{ margin:0; padding:0;}
#mainBox{ 
 width:400px; 
 height:500px; 
 border:1px #bbb solid; 
 position:relative; 
 overflow:hidden;
  margin:50px auto;
 }
#content{ 
 height:2500px; 
 position:absolute; 
 left:0; 
 top:0; 
 background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1485320653275&di=b7bc29cc2c7b3388d44958d8f97db0a3&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151212%2Fmp48094209_1449905365456_7.jpg) 
}
.scrollDiv{
 width:18px; 
 position:absolute; 
 top:0; 
 background:#666;
 border-radius:10px;
}




 
var doc=document; var _wheelData=-1; var mainBox=doc.getElementById('mainBox'); function bind(obj,type,handler){  var node=typeof obj=="string"?$(obj):obj;  if(node.addEventListener){  node.addEventListener(type,handler,false);  }else if(node.attachEvent){  node.attachEvent('on'+type,handler);  }else{  node['on'+type]=handler;  } } function mouseWheel(obj,handler){  var node=typeof obj=="string"?$(obj):obj;  bind(node,'mousewheel',function(event){  var data=-getWheelData(event);  handler(data);  if(document.all){  window.event.returnValue=false;  }else{  event.preventDefault();  }  });  //火狐  bind(node,'DOMMouseScroll',function(event){  var data=getWheelData(event);  handler(data);  event.preventDefault();  });  function getWheelData(event){  var e=event||window.event;  return e.wheelDelta?e.wheelDelta:e.detail*40;  } } function addScroll(){  this.init.apply(this,arguments); } addScroll.prototype={  init:function(mainBox,contentBox,className){  var mainBox=doc.getElementById(mainBox);  var contentBox=doc.getElementById(contentBox);  var scrollDiv=this._createScroll(mainBox,className);  this._resizeScorll(scrollDiv,mainBox,contentBox);  this._tragScroll(scrollDiv,mainBox,contentBox);  this._wheelChange(scrollDiv,mainBox,contentBox);  this._clickScroll(scrollDiv,mainBox,contentBox);  },  //創(chuàng)建滾動(dòng)條  _createScroll:function(mainBox,className){  var _scrollBox=doc.createElement('div')  var _scroll=doc.createElement('div');  var span=doc.createElement('span');  _scrollBox.appendChild(_scroll);  _scroll.appendChild(span);  _scroll.className=className;  mainBox.appendChild(_scrollBox);  return _scroll;  },  //調(diào)整滾動(dòng)條  _resizeScorll:function(element,mainBox,contentBox){  var p=element.parentNode;  var conHeight=contentBox.offsetHeight;  var _width=mainBox.clientWidth;  var _height=mainBox.clientHeight;  var _scrollWidth=element.offsetWidth;  var _left=_width-_scrollWidth;  p.style.width=_scrollWidth+"px";  p.style.height=_height+"px";  p.style.left=_left+"px";  p.style.position="absolute";  p.style.background="#ccc";  contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px";  var _scrollHeight=parseInt(_height*(_height/conHeight));  if(_scrollHeight>=mainBox.clientHeight){  element.parentNode.style.display="none";  }  element.style.height=_scrollHeight+"px";  },  //拖動(dòng)滾動(dòng)條  _tragScroll:function(element,mainBox,contentBox){  var mainHeight=mainBox.clientHeight;  element.onmousedown=function(event){  var _this=this;  var _scrollTop=element.offsetTop;  var e=event||window.event;  var top=e.clientY;  //this.onmousemove=scrollGo;  document.onmousemove=scrollGo;  document.onmouseup=function(event){  this.onmousemove=null;  }  function scrollGo(event){  var e=event||window.event;  var _top=e.clientY;  var _t=_top-top+_scrollTop;  if(_t>(mainHeight-element.offsetHeight)){   _t=mainHeight-element.offsetHeight;  }  if(_t<=0){   _t=0;  }  element.style.top=_t+"px";  contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";  _wheelData=_t;  }  }  element.onmouseover=function(){  this.style.background="#444";   }  element.onmouseout=function(){  this.style.background="#666";   }  },  //鼠標(biāo)滾輪滾動(dòng)，滾動(dòng)條滾動(dòng)  _wheelChange:function(element,mainBox,contentBox){  var node=typeof mainBox=="string"?$(mainBox):mainBox;  var flag=0,rate=0,wheelFlag=0;  if(node){  mouseWheel(node,function(data){  wheelFlag+=data;  if(_wheelData>=0){   flag=_wheelData;   element.style.top=flag+"px";   wheelFlag=_wheelData*12;   _wheelData=-1;  }else{   flag=wheelFlag/12;  }  if(flag<=0){   flag=0;   wheelFlag=0;  }  if(flag>=(mainBox.offsetHeight-element.offsetHeight)){   flag=(mainBox.clientHeight-element.offsetHeight);   wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12;  }  element.style.top=flag+"px";  contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";  });  }  },  _clickScroll:function(element,mainBox,contentBox){  var p=element.parentNode;  p.onclick=function(event){  var e=event||window.event;  var t=e.target||e.srcElement;  var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop;  var top=mainBox.offsetTop;  var _top=e.clientY+sTop-top-element.offsetHeight/2;  if(_top<=0){  _top=0;  }  if(_top>=(mainBox.clientHeight-element.offsetHeight)){  _top=mainBox.clientHeight-element.offsetHeight;  }  if(t!=element){  element.style.top=_top+"px";  contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";  _wheelData=_top;  }  }  } } new addScroll('mainBox','content','scrollDiv');

以上是“如何基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。


本文名稱：如何基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://weahome.cn/article/coedid.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部