本文實例為大家分享了js實現滑塊區間組件的具體代碼，供大家參考，具體內容如下
功能需求：
1、最小值為0，按照給定的最大值，生成區間范圍；
2、拖動滑塊移動時，顯示相應的范圍區間，滑塊條顯示對應的狀態；
3、點擊時，使最近的滑塊移動到鼠標點擊的位置。
默認效果：
當拖動滑塊時，顯示如下：
分析：
- 首先布局要寫好，一共有4個元素，兩個滑塊和兩個滑塊條。布局時要考慮到后期對滑塊和滑塊條進行事件監聽，盡可能少地出現事件冒泡；
- 拖動滑塊時，要區分是左邊的滑塊還是右邊的滑塊；
- 鼠標的click事件和mousedown事件要兼容好，這里統一使用的是mousedown事件；
- 要確定好左右滑塊的最大最小 left 值；
- 滑塊條的顯示就很簡單了，寬度是左、右滑塊的定位差值，left值是左滑塊的left值；
- 因為使用了事件委托機制，而在mousemove和mouseup事件中，無法判斷當前操作的是哪一個滑塊，所以要在鼠標按下時，將當前操作的對象傳到mousemove事件中；
下面附上代碼：
html結構，實例化滑塊，可以設置當前滑塊的區間范圍：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>slide</title></head><body> <script type="module"> import Slide from "./js/Slide.js"; init(); function init(){ //參數為最大范圍，不傳的話默認是4000 let slide=new Slide(4200); slide.appendTo("body"); } </script></body></html> |
Slide.js文件：完成創建滑塊，拖動滑塊，點擊滑塊的功能。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
import Utils from "./Utils.js";export default class Slide{ static styleCss=false; //最小范圍 minNum=0; //最大范圍 maxNum; //左邊按鈕的left值 leftBtnLeft=0; //右邊按鈕的left值 rightBtnLeft=238; constructor(_max=4000){ //最大值默認為4000 this.maxNum=_max; this.elem=this.createElem(); } createElem(){ if(this.elem) return this.elem; //創建最外層容器 let div=Utils.createE("div"); div.className="slideContainer"; div.innerHTML=`<p class="priceTxt">價格<span id="rangeText">￥${this.minNum}-${this.maxNum}</span></p> <div class="rangeContainer" id="rangeContainer"> <div class="bgRange" id="bgRange"></div> <div class="priceRange" id="priceRange"></div> <span id="leftBtn" class="leftBtn"></span> <span id="rightBtn" class="rightBtn"></span> </div>`; Utils.getIdElem(div,this); //設置樣式 Slide.setStyles(); //給父元素監聽mousedown事件 this.rangeContainer.addEventListener("mousedown",e=>this.mouseHandler(e)) return div; } appendTo(parent){ Utils.appendTo(this.elem,parent); } mouseHandler(e){ //注意：getBoundingClientRect()返回的結果中，width height 都是包含border的 let rect=this.rangeContainer.getBoundingClientRect(); switch (e.type) { case "mousedown": //取消鼠標快速拖動的默認事件 e.preventDefault(); this.x = e.offsetX; this.btnType=e.target.id; //如果點擊的是背景條，執行rangeClick函數 if(/Range/.test(this.btnType)){ e.stopPropagation(); //點擊函數 this.rangeClick(e); return; } //如果點擊的是按鈕，監聽document鼠標移動事件 this.mouseHandlers=e=>this.mouseHandler(e); document.addEventListener("mousemove", this.mouseHandlers); document.addEventListener("mouseup", this.mouseHandlers); break; case "mousemove": let x = e.clientX - rect.x - this.x; //獲取左右按鈕的left值 this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left); this.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left); if (this.btnType === "leftBtn") { //確定左邊按鈕的取值范圍 if (x < 0) x = 0; if (x > this.rightBtnLeft) x = this.rightBtnLeft; this.leftBtn.style.left = x + "px"; } else if (this.btnType === "rightBtn") { //確定右邊按鈕的取值范圍，減去1px邊框 if (x < this.leftBtnLeft) x = this.leftBtnLeft; if (x > this.bgRange.offsetWidth - 2) x = this.bgRange.offsetWidth - 2; this.rightBtn.style.left = x + "px"; } //文字范圍顯示 this.changeRangeText(); break; case "mouseup": //移動事件監聽 document.removeEventListener("mousemove", this.mouseHandlers); document.removeEventListener("mouseup", this.mouseHandlers); break; } } rangeClick(e){ //計算出鼠標點擊位置的值 let click_X=e.clientX-this.rangeContainer.getBoundingClientRect().x-this.leftBtn.offsetWidth/2; //判斷，如果當前點擊的位置是在左邊按鈕的左側、或者當左右按鈕重疊時，點擊的位置在按鈕左側，讓左邊按鈕移動到鼠標點擊的位置 if(Math.abs(click_X-this.leftBtnLeft)<Math.abs(click_X-this.rightBtnLeft) || (this.leftBtnLeft===this.rightBtnLeft && click_X<this.leftBtnLeft)) this.leftBtn.style.left=click_X+"px"; //否則，讓右邊按鈕移動到鼠標點擊的位置 else this.rightBtn.style.left=click_X+"px"; //獲取移動后的左右按鈕的left值 this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left); this.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left); //文字范圍顯示 this.changeRangeText(); } changeRangeText(){ //計算出最小范圍與最大范圍的值，四舍五入 let minTxt=Math.round(this.leftBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum); let maxTxt=Math.round(this.rightBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum); this.rangeText.innerText=`￥${minTxt}-${maxTxt}`; //滑塊顏色的改變 this.changeRangeSlide(); } changeRangeSlide(){ //滑塊寬度等于左右按鈕間的距離 this.priceRange.style.width=this.rightBtnLeft-this.leftBtnLeft+"px"; //滑塊的left值等于左邊按鈕的left值 this.priceRange.style.left=this.leftBtnLeft+"px"; } static setStyles(){ if(Slide.styleCss) return; Slide.styleCss=true; Utils.insertCss(".slideContainer",{ width:"260px", height:"70px", margin:"50px" }) Utils.insertCss(".priceTxt",{ fontSize:"14px", color:"#666", marginBottom:"20px" }) Utils.insertCss(".priceTxt span",{ float:"right" }) Utils.insertCss(".rangeContainer",{ width:"260px", height:"20px", position:"relative", }) Utils.insertCss(".bgRange",{ width:"240px", height:"3px", backgroundColor:"#dedede", position:"absolute", left:"10px", top:"9px" }) Utils.insertCss(".priceRange",{ width:"240px", height:"3px", background:"#ffa800", position:"absolute", left:"10px", top:"9px" }) Utils.insertCss(".rangeContainer span",{ width: "20px", height: "20px", borderRadius:"50%", border:"1px solid #ccc", background:"#fff", position:"absolute", top:"0px", boxShadow:"2px 2px 2px #333" }) Utils.insertCss(".leftBtn",{ left:"0px" }) Utils.insertCss(".rightBtn",{ left:"238px" }) }} |
Utils.js文件：是一個工具包文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
export default class Utils{ static createE(elem,style,prep){ elem=document.createElement(elem); if(style) for(let prop in style) elem.style[prop]=style[prop]; if(prep) for(let prop in prep) elem[prop]=prep[prop]; return elem; } static appendTo(elem,parent){ if (parent.constructor === String) parent = document.querySelector(parent); parent.appendChild(elem); } static randomNum(min,max){ return Math.floor(Math.random*(max-min)+min); } static randomColor(alpha){ alpha=alpha||Math.random().toFixed(1); if(isNaN(alpha)) alpha=1; if(alpha>1) alpha=1; if(alpha<0) alpha=0; let col="rgba("; for(let i=0;i<3;i++){ col+=Utils.randomNum(0,256)+","; } col+=alpha+")"; return col; } static insertCss(select,styles){ if(document.styleSheets.length===0){ let styleS=Utils.createE("style"); Utils.appendTo(styleS,document.head); } let styleSheet=document.styleSheets[document.styleSheets.length-1]; let str=select+"{"; for(var prop in styles){ str+=prop.replace(/[A-Z]/g,function(item){ return "-"+item.toLocaleLowerCase(); })+":"+styles[prop]+";"; } str+="}" styleSheet.insertRule(str,styleSheet.cssRules.length); } static getIdElem(elem,obj){ if(elem.id) obj[elem.id]=elem; if(elem.children.length===0) return obj; for(let i=0;i<elem.children.length;i++){ Utils.getIdElem(elem.children[i],obj); } }} |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/Charissa2017/article/details/104099156
