js實現水平和豎直滑動條

更新時間：2021年08月10日 17:12:50 作者：過而不及__

這篇文章主要為大家詳細介紹了js實現水平和豎直滑動條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

代碼如下：

<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>

這里之所以加入移動百分比的展示效果，主要是考慮到后續(xù)如果需要對接后臺的數據就可以達到動態(tài)控制的目的。

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

您可能感興趣的文章: