快捷導(dǎo)航

javascript動畫系列之模擬滾動條

更新時間：2016年12月13日 11:41:16 作者：小火柴的藍(lán)色理想

本文主要介紹了js動畫模擬滾動條的實(shí)現(xiàn)原理以及分享了通過滾動條實(shí)現(xiàn)的幾個應(yīng)用的實(shí)例代碼:1.通過移動滾動條來實(shí)現(xiàn)數(shù)字的加減;2.通過拖動滾動條來實(shí)現(xiàn)元素尺寸的變化，以改變元素寬度為例;3.通過拖動滾動條來實(shí)現(xiàn)內(nèi)容滾。需要的朋友一起來看下吧

前面的話

當(dāng)元素內(nèi)容溢出元素尺寸范圍時，會出現(xiàn)滾動條。但由于滾動條在各瀏覽器下表現(xiàn)不同，兼容性不好。所以，模擬滾動條也是很常見的應(yīng)用。本文將詳細(xì)介紹滾動條模擬

原理介紹

滾動條模擬實(shí)際上和元素模擬拖拽類似。僅僅通過范圍限定，使元素只可以在單一方向上拖拽

<div id="box" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
 <div id="test" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<script>
test.onmousedown = function(e){
 e = e || event;
 var that = this;
 var disY = e.clientY - this.offsetTop;
 document.onmousemove = function(e){
  e = e || event;
  var T = e.clientY - disY;
  if(T < 0){T = 0;}
  var TMax = parseInt(box.style.height) - that.offsetHeight;
  if(T > TMax){T = TMax;}
  that.style.top = T + 'px'; 
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  //釋放全局捕獲
  if(test.releaseCapture){test.releaseCapture();}
 }
 //IE8-瀏覽器阻止默認(rèn)行為
 if(test.setCapture){test.setCapture();}
 //阻止默認(rèn)行為
 return false;
}
</script>

通過將上面代碼封裝成函數(shù)，可以實(shí)現(xiàn)橫向和縱向兩種滾動條

<div id="box1" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
 <div id="test1" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<div id="box2" style="height: 16px;width: 200px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
 <div id="test2" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<script>
function scrollbar(obj,str){
 obj.onmousedown = function(e){
  e = e || event;
  var that = this;
  //x軸方向
  if(str == 'x'){
   var disX = e.clientX - this.offsetLeft;
  //否則為y軸方向
  }else{
   var disY = e.clientY - this.offsetTop;
  }
  document.onmousemove = function(e){
   e = e || event;
   if(str == 'x'){
    var L = e.clientX - disX;
    if(L < 0){L = 0;}
    var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
    if(L > LMax){L = LMax;}
    that.style.left = L + 'px'; 
   }else{
    var T = e.clientY - disY;
    if(T < 0){T = 0;}
    var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
    if(T > TMax){T = TMax;}
    that.style.top = T + 'px'; 
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   //釋放全局捕獲
   if(obj.releaseCapture){obj.releaseCapture();}
  }
  //IE8-瀏覽器阻止默認(rèn)行為
  if(obj.setCapture){obj.setCapture();}
  //阻止默認(rèn)行為
  return false;
 } 
}
scrollbar(test1);
scrollbar(test2,'x')
</script>

應(yīng)用

下面來介紹通過滾動條實(shí)現(xiàn)的幾個應(yīng)用

數(shù)字加減

通過移動滾動條來實(shí)現(xiàn)數(shù)字的加減。比例關(guān)系為：

滾動條已移動距離/滾動條可移動距離= 數(shù)字當(dāng)前值/數(shù)字最大值

<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
 <div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result">0</span>
<script>
function scrollbar(obj,str,max){
 obj.onmousedown = function(e){
  e = e || event;
  var that = this;
  //比例系數(shù)
  var ratio;
  //x軸方向
  if(str == 'x'){
   var disX = e.clientX - this.offsetLeft;
   ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
  //否則為y軸方向
  }else{
   var disY = e.clientY - this.offsetTop;
   ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
  }
  document.onmousemove = function(e){
   e = e || event;
   if(str == 'x'){
    var L = e.clientX - disX;
    if(L < 0){L = 0;}
    var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
    if(L > LMax){L = LMax;}
    that.style.left = L + 'px'; 
    result.innerHTML = Math.round(ratio * L);
   }else{
    var T = e.clientY - disY;
    if(T < 0){T = 0;}
    var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
    if(T > TMax){T = TMax;}
    that.style.top = T + 'px'; 
    result.innerHTML = Math.round(ratio * T); 
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   //釋放全局捕獲
   if(obj.releaseCapture){obj.releaseCapture();}
  }
  //IE8-瀏覽器阻止默認(rèn)行為
  if(obj.setCapture){obj.setCapture();}
  //阻止默認(rèn)行為
  return false;
 } 
}
scrollbar(test,'x',100);
</script>

元素尺寸

通過拖動滾動條來實(shí)現(xiàn)元素尺寸的變化，以改變元素寬度為例。比例關(guān)系為：

滾動條已移動距離/滾動條可移動距離= 元素當(dāng)前寬度/元素最大寬度

<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
 <div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result" style="width: 1px;height: 50px;background-color:pink;display:inline-block;"></span>
<script>
function scrollbar(obj,str,max){
 obj.onmousedown = function(e){
  e = e || event;
  var that = this;
  //比例系數(shù)
  var ratio;
  //x軸方向
  if(str == 'x'){
   var disX = e.clientX - this.offsetLeft;
   ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
  //否則為y軸方向
  }else{
   var disY = e.clientY - this.offsetTop;
   ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
  }
  document.onmousemove = function(e){
   e = e || event;
   if(str == 'x'){
    var L = e.clientX - disX;
    if(L < 0){L = 0;}
    var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
    if(L > LMax){L = LMax;}
    that.style.left = L + 'px'; 
    result.style.width = Math.round(ratio * L) + 'px';
   }else{
    var T = e.clientY - disY;
    if(T < 0){T = 0;}
    var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
    if(T > TMax){T = TMax;}
    that.style.top = T + 'px'; 
    result.style.width = Math.round(ratio * T) + 'px'; 
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   //釋放全局捕獲
   if(obj.releaseCapture){obj.releaseCapture();}
  }
  //IE8-瀏覽器阻止默認(rèn)行為
  if(obj.setCapture){obj.setCapture();}
  //阻止默認(rèn)行為
  return false;
 } 
}
scrollbar(test,'x',100);
</script>

內(nèi)容滾動

通過拖動滾動條來實(shí)現(xiàn)內(nèi)容滾動，比例關(guān)系為：

滾動條已移動距離/滾動條可移動距離= 內(nèi)容已移動距離/內(nèi)容可移動距離

<div id="box" style="height: 200px;width: 16px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;vertical-align:middle;">
 <div id="test" style="height: 60px;width: 16px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result" style="width: 100px;height: 200px;background-color:pink;display:inline-block;line-height:30px;vertical-align:middle;position:relative;overflow:hidden;"><div id="resultIn" style="position:absolute;top:0;">測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br></div></span>
<script>
function scrollbar(obj,str){
 var max = result.offsetHeight - resultIn.offsetHeight;
 obj.onmousedown = function(e){
  e = e || event;
  var that = this;
  //比例系數(shù)
  var ratio;
  //x軸方向
  if(str == 'x'){
   var disX = e.clientX - this.offsetLeft;
   ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
  //否則為y軸方向
  }else{
   var disY = e.clientY - this.offsetTop;
   ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
  }
  document.onmousemove = function(e){
   e = e || event;
   if(str == 'x'){
    var L = e.clientX - disX;
    if(L < 0){L = 0;}
    var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
    if(L > LMax){L = LMax;}
    that.style.left = L + 'px'; 
    resultIn.style.top = Math.round(ratio * L) + 'px';
   }else{
    var T = e.clientY - disY;
    if(T < 0){T = 0;}
    var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
    if(T > TMax){T = TMax;}
    that.style.top = T + 'px'; 
    resultIn.style.top = Math.round(ratio * T) + 'px';
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   //釋放全局捕獲
   if(obj.releaseCapture){obj.releaseCapture();}
  }
  //IE8-瀏覽器阻止默認(rèn)行為
  if(obj.setCapture){obj.setCapture();}
  //阻止默認(rèn)行為
  return false;
 } 
}
scrollbar(test,'y');
</script>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: