<!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(){
  /**
   * 滑動條對象構(gòu)造函數(shù)，
   * 內(nèi)含其他功能性函數(shù)，利用函數(shù)作用域鏈的原理，防止自己隨意調(diào)用
   * 兼容：firefox、opera、chrome
   * ie沒試，然而顯然不兼容舊版本ie（8及之前），因為舊版本ie添加事件監(jiān)聽函數(shù)的方法不同。如若要兼容ie，還需要添加其他函數(shù)
   * js生成的滑動條類名為slider_bar、滑動塊類型為slider_block，可用css樣式自己設(shè)置大小、顏色等。
   * 滑動條左右padding未限制滑動條界限，如若需要限制，須在計算部分進行細小修改，加算padding，此處略去。
   *
   * @param {DOMElement} slider_content 被滾動的元素（不是被滾動元素的父元素）
   */
  function Slider(slider_content){
   //slider_instance為對象本身（在事件處理函數(shù)中會進行訪問，而事件處理函數(shù)中的this對象已被注入為event.currentTarget，因此預(yù)先存儲）
   var slider_instance=this;
   //this.slider_content為被滾動的元素
   this.slider_content=slider_content;
   //this.outer為被滾動元素的父元素
   this.outer=slider_content.parentNode;
   //創(chuàng)建滑動條
   this.slider_bar=createSliderBar();
   //創(chuàng)建滑動條塊
   this.slider_block=createSliderBlock();
   //拼裝
   this.slider_bar.appendChild(this.slider_block);
   this.outer.appendChild(this.slider_bar);
   //被滾動元素可被滾動的總寬度
   this.slider_content_width=this.slider_content.offsetWidth-this.outer.clientWidth;
   //滑動條塊可滑動的總寬度
   this.slider_bar_width=this.slider_bar.clientWidth-this.slider_block.offsetWidth;
   //被滾動元素的左邊距（相對父元素）
   this.slider_content_left=0;
   //滾動塊的左邊距（相對父元素）
   this.slider_block_left=0;
   //滑動條的左邊距（相對視口）
   this.slider_bar_pageLeft=getPageLeft(this.slider_bar);
   //滑動條塊添加鼠標(biāo)壓鍵事件
   this.slider_block.addEventListener("mousedown",mousedownHandler,false);
   //離開父元素后取消鼠標(biāo)移動事件
   this.outer.addEventListener("mouseleave",mouseupHandler,false);
   //鼠標(biāo)彈鍵時取消鼠標(biāo)移動事件
   this.outer.addEventListener("mouseup",mouseupHandler,false);
   /**
    * 創(chuàng)建滑動條
    */
   function createSliderBar(){
    var slider_bar=document.createElement("div");
    slider_bar.className="slider_bar";
    return slider_bar;
   }
   /**
    * 創(chuàng)建滑動條塊
    */
   function createSliderBlock(){
    var slider_block=document.createElement("div");
    slider_block.className="slider_block";
    return slider_block
   }
   /**
    * 鼠標(biāo)按下事件處理
    */
   function mousedownHandler(event){
    //計算鼠標(biāo)相對滑動塊的左邊距，進而在鼠標(biāo)移動事件處理函數(shù)中使用
    //鼠標(biāo)相對滑動塊左邊距=鼠標(biāo)相對視口左邊距-滑動塊相對視口左邊距
    slider_instance.mouseLeft=event.clientX-getPageLeft(this);
    console.log(getPageLeft(this));
    slider_instance.outer.addEventListener("mousemove",mousemoveHandler,false);
   }
   /**
    * 鼠標(biāo)移動事件處理
    */
   function mousemoveHandler(event){
    //計算出應(yīng)當(dāng)設(shè)置的滑動塊左邊距（相對于父容器）
    //滑動塊相對于滑動條左邊距=鼠標(biāo)相對于視口左邊距-滑動條相對于視口左邊距-鼠標(biāo)相對于滑動塊左邊距
    var blockLeft=event.clientX-slider_instance.slider_bar_pageLeft-slider_instance.mouseLeft;
    //如若滑動塊相對于父容器左邊距大于滑動塊可移動寬度或小于0，表示過界；設(shè)置為左右界限值
    if(blockLeft>slider_instance.slider_bar_width){
     blockLeft=slider_instance.slider_bar_width
    }else if(blockLeft<0){
     blockLeft=0;
    }
    //設(shè)置滑動塊的新位置
    slider_instance.slider_block.style.left=blockLeft+"px";
    //按照滾動塊已滾動的百分比，設(shè)置被滾動元素的marginLeft（負值），進而讓其滾動起來
    //被滾動元素的左margin=-(滑動塊相對于滑動條左邊距/可滑動最大寬度*可滾動元素的最大寬度)
    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元素進行展示
  new Slider(document.getElementsByClassName("test_div")[0]);

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

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

您可能感興趣的文章: