快捷導(dǎo)航

js實(shí)現(xiàn)水平和豎直滑動(dòng)條

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

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

最近在做練手項(xiàng)目時(shí)候，需要用到滑動(dòng)條，所以就稍微研究了一下。

首先來看水平滑動(dòng)條，效果圖如下：

代碼如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title>水平滑動(dòng)條</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;
    //頁(yè)面事件的X減去當(dāng)前相對(duì)于最近的祖先定位元素
    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 = "當(dāng)前滑塊的移動(dòng)的百分比：" + parseInt(left / (scroll.offsetWidth - bar.offsetWidth) * 100) + "%";
     //防止選擇內(nèi)容
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
 
   }
   //當(dāng)鼠標(biāo)彈起的時(shí)候，不做任何操作
   document.onmouseup = function() {
    document.onmousemove = null;
   }
  </script>
 </body>
</html>

豎直滑動(dòng)條效果圖如下：

代碼如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title>豎直滑動(dòng)條</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è)面事件的Y減去當(dāng)前相對(duì)于最近的祖先定位元素
    var y = event.clientY - this.offsetTop;
    // 拖動(dòng)需要寫到down里面
    document.onmousemove = function(event) {
     var event = event || window.event;
     //獲取移動(dòng)的距離
     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";
     //按照百分比得到當(dāng)前滑動(dòng)的距離
     ptxt.innerHTML = "當(dāng)前滑塊的移動(dòng)的百分比：" + parseInt(top/(scroll.offsetHeight - bar.offsetHeight) * 100) + "%";
     //防止選擇內(nèi)容
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
   }
   //當(dāng)鼠標(biāo)彈起的時(shí)候，不做任何操作
   document.onmouseup = function() {
    document.onmousemove = null; 
   }
   
  </script>
 </body>
</html>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: