本文實(shí)例講解原生JavaScript實(shí)現(xiàn)滾動(dòng)條效果的相關(guān)代碼，分享給大家供大家參考，具體內(nèi)容如下
原理是對(duì)滑動(dòng)條塊進(jìn)行監(jiān)聽(tīng)，按下鼠標(biāo)按鍵后，監(jiān)聽(tīng)鼠標(biāo)移動(dòng)，然后根據(jù)滑動(dòng)條塊移動(dòng)的百分比算出滾動(dòng)區(qū)域的滾動(dòng)程度，用marginLeft進(jìn)行滾動(dòng)，具體的寫(xiě)在注釋里。
整體弄成了一個(gè)對(duì)象，防止各種亂七八糟的數(shù)據(jù)污染全局變量。另外，對(duì)象內(nèi)部調(diào)用的函數(shù)也都寫(xiě)到了對(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)聽(tīng)函數(shù)的方法不同。如若要兼容ie，還需要添加其他函數(shù) * js生成的滑動(dòng)條類(lèi)名為slider_bar、滑動(dòng)塊類(lèi)型為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)行訪(fǎng)問(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); //離開(kāi)父元素后取消鼠標(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ì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
