首頁 > 開發者 > JavaScript
原生JavaScript實現捲軸效果，javascript捲軸
本文執行個體講解原生JavaScript實現捲軸效果的相關代碼，分享給大家供大家參考，具體內容如下
原理是對滑動條塊進行監聽，按下滑鼠按鍵後，監聽滑鼠移動，然後根據滑動條塊移動的百分比算出捲動區域的滾動程度，用marginLeft進行滾動，具體的寫在注釋裡。
整體弄成了一個對象，防止各種亂七八糟的資料汙染全域變數。另外，對象內部調用的函數也都寫到了物件建構函數的裡面，由於對象範圍鏈的原理，外部無法進行調用，防止不小心在外部調用。
<!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(){ /** * 滑動條物件建構函數， * 內含其他功能性函數，利用函數範圍鏈的原理，防止自己隨意調用 * 相容：firefox、opera、chrome * ie沒試，然而顯然不相容舊版本ie（8及之前），因為舊版本ie添加事件監聽函數的方法不同。如若要相容ie，還需要添加其他函數 * js產生的滑動條類名為slider_bar、滑動塊類型為slider_block，可用css樣式自己設定大小、顏色等。 * 滑動條左右padding未限制滑動條界限，如若需要限制，須在計算部分進行細小修改，加算padding，此處略去。 * * @param {DOMElement} slider_content 被滾動的元素（不是被滾動元素的父元素） */ function Slider(slider_content){ //slider_instance為對象本身（在事件處理函數中會進行訪問，而事件處理函數中的this對象已被注入為event.currentTarget，因此預先儲存） var slider_instance=this; //this.slider_content為被滾動的元素 this.slider_content=slider_content; //this.outer為被滾動元素的父元素 this.outer=slider_content.parentNode; //建立滑動條 this.slider_bar=createSliderBar(); //建立滑動條塊 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); //滑動條塊添加滑鼠壓鍵事件 this.slider_block.addEventListener("mousedown",mousedownHandler,false); //離開父元素後取消滑鼠移動事件 this.outer.addEventListener("mouseleave",mouseupHandler,false); //滑鼠彈鍵時取消滑鼠移動事件 this.outer.addEventListener("mouseup",mouseupHandler,false); /** * 建立滑動條 */ function createSliderBar(){ var slider_bar=document.createElement("div"); slider_bar.className="slider_bar"; return slider_bar; } /** * 建立滑動條塊 */ function createSliderBlock(){ var slider_block=document.createElement("div"); slider_block.className="slider_block"; return slider_block } /** * 滑鼠按下事件處理 */ function mousedownHandler(event){ //計算滑鼠相對滑動塊的左邊距，進而在滑鼠移動事件處理函數中使用 //滑鼠相對滑動塊左邊距=滑鼠相對視口左邊距-滑動塊相對視口左邊距 slider_instance.mouseLeft=event.clientX-getPageLeft(this); console.log(getPageLeft(this)); slider_instance.outer.addEventListener("mousemove",mousemoveHandler,false); } /** * 滑鼠移動事件處理 */ function mousemoveHandler(event){ //計算出應當設定的滑動塊左邊距（相對於父容器） //滑動塊相對於滑動條左邊距=滑鼠相對於視口左邊距-滑動條相對於視口左邊距-滑鼠相對於滑動塊左邊距 var blockLeft=event.clientX-slider_instance.slider_bar_pageLeft-slider_instance.mouseLeft; //如若滑動塊相對於父容器左邊距大於滑動塊可移動寬度或小於0，表示過界；設定為左右界限值 if(blockLeft>slider_instance.slider_bar_width){ blockLeft=slider_instance.slider_bar_width }else if(blockLeft<0){ blockLeft=0; } //設定滑動塊的新位置 slider_instance.slider_block.style.left=blockLeft+"px"; //按照滾動塊已滾動的百分比，設定被滾動元素的marginLeft（負值），進而讓其滾動起來 //被滾動元素的左margin=-(滑動塊相對於滑動條左邊距/可滑動最大寬度*可滾動元素的最大寬度) slider_instance.slider_content.style.marginLeft="-"+(blockLeft/slider_instance.slider_bar_width*slider_instance.slider_content_width)+"px"; } /** * 滑鼠鍵彈起事件處理 */ 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>
希望本文所述對大家學習javascript程式設計有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
