js實現水平和豎直滑動條

Posted on by

最近在做練手項目時候，需要用到滑動條，所以就稍微研究瞭一下。

首先來看水平滑動條，效果圖如下：

代碼如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title>水平滑動條</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
 
   .scroll {
    margin: 100px;
    width: 500px;
    height: 5px;
    background: #ccc;
    position: relative;
   }
 
   .bar {
    width: 10px;
    height: 20px;
    background: #369;
    position: absolute;
    top: -7px;
    left: 0;
    cursor: pointer;
   }
   p{
    margin-left: 100px;
   }
  </style>
 </head>
 <body>
  <div class="scroll" id="scroll">
   <div class="bar" id="bar">
   </div>
  </div>
  <p></p>
  <script>
   //獲取元素
   var scroll = document.getElementById('scroll');
   var bar = document.getElementById('bar');
   var ptxt = document.getElementsByTagName('p')[0];
   bar.onmousedown = function(event) {
    var event = event || window.event;
    //頁面事件的X減去當前相對於最近的祖先定位元素
    var x = event.clientX - this.offsetLeft;
    document.onmousemove = function(event) {
     var event = event || window.event;
     var left = event.clientX - x;
     if (left < 0)
      left = 0;
     else if (left > scroll.offsetWidth - bar.offsetWidth) {
      left = scroll.offsetWidth - bar.offsetWidth;
     }
     //改變滑塊的left
     bar.style.left = left + "px";
     ptxt.innerHTML = "當前滑塊的移動的百分比：" + parseInt(left / (scroll.offsetWidth - bar.offsetWidth) * 100) + "%";
     //防止選擇內容
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
 
   }
   //當鼠標彈起的時候，不做任何操作
   document.onmouseup = function() {
    document.onmousemove = null;
   }
  </script>
 </body>
</html>

豎直滑動條效果圖如下：

代碼如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title>豎直滑動條</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   .scroll{
    margin: 100px;
    width: 5px;
    height: 320px;
    background: #ccc;
    position: relative;
   }
 
   .bar {
    width: 15px;
    height: 5px;
    background: #369;
    position: absolute;
    top: 0px;
    left: -5;
    cursor: pointer;
   }
   p{
    margin-left: 100px;
   }
  </style>
 </head>
 <body>
  <div class="scroll" id="scroll">
   <div class="bar" id="bar">
   </div>
  </div>
  <p></p>
  <script>
   //獲取元素
   var scroll = document.getElementById("scroll");
   var bar = document.getElementById("bar");
   var ptxt = document.getElementsByTagName('p')[0];
   //添加事件
   bar.onmousedown = function(event) {
    var event = event || window.event;
    //頁面事件的Y減去當前相對於最近的祖先定位元素
    var y = event.clientY - this.offsetTop;
    // 拖動需要寫到down裡面
    document.onmousemove = function(event) {
     var event = event || window.event;
     //獲取移動的距離
     var top = event.clientY - y;
     if (top < 0){
      top = 0;
     }
     else if (top > scroll.offsetHeight - bar.offsetHeight){
      top = scroll.offsetHeight - bar.offsetHeight;
     }
     //改變滑塊的top
     bar.style.top = top + "px";
     //按照百分比得到當前滑動的距離
     ptxt.innerHTML = "當前滑塊的移動的百分比：" + parseInt(top/(scroll.offsetHeight - bar.offsetHeight) * 100) + "%";
     //防止選擇內容
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
   }
   //當鼠標彈起的時候，不做任何操作
   document.onmouseup = function() {
    document.onmousemove = null; 
   }
   
  </script>
 </body>
</html>

這裡之所以加入移動百分比的展示效果，主要是考慮到後續如果需要對接後臺的數據就可以達到動態控制的目的。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：