原理是對(duì)滑動(dòng)條塊進(jìn)行監(jiān)聽，按下鼠標(biāo)按鍵后，監(jiān)聽鼠標(biāo)移動(dòng)，然后根據(jù)滑動(dòng)條塊移動(dòng)的百分比算出滾動(dòng)區(qū)域的滾動(dòng)程度，用marginLeft進(jìn)行滾動(dòng)，具體的寫在注釋里。

整體弄成了一個(gè)對(duì)象，防止各種亂七八糟的數(shù)據(jù)污染全局變量。另外，對(duì)象內(nèi)部調(diào)用的函數(shù)也都寫到了對(duì)象構(gòu)造函數(shù)的里面，由于對(duì)象作用域鏈的原理，外部無(wú)法進(jìn)行調(diào)用，防止不小心在外部調(diào)用。

<!DOCTYPE html>
<html>
<head>
 <title>Blank Page for Rich Text Editing</title>
 <meta http-equiv="content-type" name="author" content="Fujihara No Kokukiyo" />
 <meta charset="utf-8" />
</head>
<style rel="stylesheet" type="text/css">
 .outer{width:500px;border:1px solid black;overflow:hidden;margin:50px 0 0 100px;}
 .test_div{width:1200px;background-image:linear-gradient(90deg,lightcoral 0%,lightgreen 50%,lightblue 100%);height:150px;}
 .slider_bar,.slider_block{ border-radius:5px;}
 .slider_bar{position:relative;width:80%;margin:5px auto 5px auto;background-color:lightgreen;height:5px;}
 .slider_block{width:20px;height:5px;background-color:grey;cursor:pointer;position:absolute;}
</style>
<script type="text/javascript">
 window.onload=function(){
  /**
   * 滑動(dòng)條對(duì)象構(gòu)造函數(shù)，
   * 內(nèi)含其他功能性函數(shù)，利用函數(shù)作用域鏈的原理，防止自己隨意調(diào)用
   * 兼容：firefox、opera、chrome
   * ie沒(méi)試，然而顯然不兼容舊版本ie（8及之前），因?yàn)榕f版本ie添加事件監(jiān)聽函數(shù)的方法不同。如若要兼容ie，還需要添加其他函數(shù)
   * js生成的滑動(dòng)條類名為slider_bar、滑動(dòng)塊類型為slider_block，可用css樣式自己設(shè)置大小、顏色等。
   * 滑動(dòng)條左右padding未限制滑動(dòng)條界限，如若需要限制，須在計(jì)算部分進(jìn)行細(xì)小修改，加算padding，此處略去。
   *
   * @param {DOMElement} slider_content 被滾動(dòng)的元素（不是被滾動(dòng)元素的父元素）
   */
  function Slider(slider_content){
   //slider_instance為對(duì)象本身（在事件處理函數(shù)中會(huì)進(jìn)行訪問(wèn)，而事件處理函數(shù)中的this對(duì)象已被注入為event.currentTarget，因此預(yù)先存儲(chǔ)）
   var slider_instance=this;
   //this.slider_content為被滾動(dòng)的元素
   this.slider_content=slider_content;
   //this.outer為被滾動(dòng)元素的父元素
   this.outer=slider_content.parentNode;
   //創(chuàng)建滑動(dòng)條
   this.slider_bar=createSliderBar();
   //創(chuàng)建滑動(dòng)條塊
   this.slider_block=createSliderBlock();
   //拼裝
   this.slider_bar.appendChild(this.slider_block);
   this.outer.appendChild(this.slider_bar);
   //被滾動(dòng)元素可被滾動(dòng)的總寬度
   this.slider_content_width=this.slider_content.offsetWidth-this.outer.clientWidth;
   //滑動(dòng)條塊可滑動(dòng)的總寬度
   this.slider_bar_width=this.slider_bar.clientWidth-this.slider_block.offsetWidth;
   //被滾動(dòng)元素的左邊距（相對(duì)父元素）
   this.slider_content_left=0;
   //滾動(dòng)塊的左邊距（相對(duì)父元素）
   this.slider_block_left=0;
   //滑動(dòng)條的左邊距（相對(duì)視口）
   this.slider_bar_pageLeft=getPageLeft(this.slider_bar);
   //滑動(dòng)條塊添加鼠標(biāo)壓鍵事件
   this.slider_block.addEventListener("mousedown",mousedownHandler,false);
   //離開父元素后取消鼠標(biāo)移動(dòng)事件
   this.outer.addEventListener("mouseleave",mouseupHandler,false);
   //鼠標(biāo)彈鍵時(shí)取消鼠標(biāo)移動(dòng)事件
   this.outer.addEventListener("mouseup",mouseupHandler,false);
   /**
    * 創(chuàng)建滑動(dòng)條
    */
   function createSliderBar(){
    var slider_bar=document.createElement("div");
    slider_bar.className="slider_bar";
    return slider_bar;
   }
   /**
    * 創(chuàng)建滑動(dòng)條塊
    */
   function createSliderBlock(){
    var slider_block=document.createElement("div");
    slider_block.className="slider_block";
    return slider_block
   }
   /**
    * 鼠標(biāo)按下事件處理
    */
   function mousedownHandler(event){
    //計(jì)算鼠標(biāo)相對(duì)滑動(dòng)塊的左邊距，進(jìn)而在鼠標(biāo)移動(dòng)事件處理函數(shù)中使用
    //鼠標(biāo)相對(duì)滑動(dòng)塊左邊距=鼠標(biāo)相對(duì)視口左邊距-滑動(dòng)塊相對(duì)視口左邊距
    slider_instance.mouseLeft=event.clientX-getPageLeft(this);
    console.log(getPageLeft(this));
    slider_instance.outer.addEventListener("mousemove",mousemoveHandler,false);
   }
   /**
    * 鼠標(biāo)移動(dòng)事件處理
    */
   function mousemoveHandler(event){
    //計(jì)算出應(yīng)當(dāng)設(shè)置的滑動(dòng)塊左邊距（相對(duì)于父容器）
    //滑動(dòng)塊相對(duì)于滑動(dòng)條左邊距=鼠標(biāo)相對(duì)于視口左邊距-滑動(dòng)條相對(duì)于視口左邊距-鼠標(biāo)相對(duì)于滑動(dòng)塊左邊距
    var blockLeft=event.clientX-slider_instance.slider_bar_pageLeft-slider_instance.mouseLeft;
    //如若滑動(dòng)塊相對(duì)于父容器左邊距大于滑動(dòng)塊可移動(dòng)寬度或小于0，表示過(guò)界；設(shè)置為左右界限值
    if(blockLeft>slider_instance.slider_bar_width){
     blockLeft=slider_instance.slider_bar_width
    }else if(blockLeft<0){
     blockLeft=0;
    }
    //設(shè)置滑動(dòng)塊的新位置
    slider_instance.slider_block.style.left=blockLeft+"px";
    //按照滾動(dòng)塊已滾動(dòng)的百分比，設(shè)置被滾動(dòng)元素的marginLeft（負(fù)值），進(jìn)而讓其滾動(dòng)起來(lái)
    //被滾動(dòng)元素的左margin=-(滑動(dòng)塊相對(duì)于滑動(dòng)條左邊距/可滑動(dòng)最大寬度*可滾動(dòng)元素的最大寬度)
    slider_instance.slider_content.style.marginLeft="-"+(blockLeft/slider_instance.slider_bar_width*slider_instance.slider_content_width)+"px";
   }
   /**
    * 鼠標(biāo)鍵彈起事件處理
    */
   function mouseupHandler(event){
    slider_instance.outer.removeEventListener("mousemove",mousemoveHandler,false);
   }
   /**
    * 獲得元素的視口左邊距
    */
   function getPageLeft(el){
    var result=el.offsetLeft;
    var parent=el.offsetParent;
    while(parent!==null){
     result+=parent.offsetLeft;
     parent=parent.offsetParent;
    }
    return result;
   }
  }
  //用test_div元素進(jìn)行展示
  new Slider(document.getElementsByClassName("test_div")[0]);

 }
</script>
<body>
<div class="outer">
 <div class="test_div"></div>
</div>
</body>
</html>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: