JS實(shí)現(xiàn)拖動滑塊驗(yàn)證

第JS實(shí)現(xiàn)拖動滑塊驗(yàn)證1、獲取silde滑塊（獲取元素）

2、為元素注冊事件鼠標(biāo)點(diǎn)擊事件（onmousedown）鼠標(biāo)點(diǎn)擊之后獲得當(dāng)前鼠標(biāo)的X坐標(biāo)。

3、如何獲取到鼠標(biāo)的x坐標(biāo)使用clientX事件（當(dāng)事件被觸發(fā)時，鼠標(biāo)指針的水平坐標(biāo)）。

4、鼠標(biāo)移動事件發(fā)生后根據(jù)從最開始點(diǎn)擊的X值到移動后的X值之差，作為滑塊移動的差值鼠標(biāo)移動事件（onmousemove）；

5、獲取鼠標(biāo)移動之后的X坐標(biāo)

6、獲得初始X坐標(biāo)和移動后X值

7、該變left的值

8、綠色背景跟著小滑塊走

9、鼠標(biāo)抬起清除鼠標(biāo)移動事件。

注意：哪怕鼠標(biāo)移動的時候超出了最外面的方塊區(qū)域，滑塊也要可以移動。所以不能只在滑塊上設(shè)置移動事件，需要在文檔document上設(shè)置移動事件。

主要用到的事件：

1、鼠標(biāo)點(diǎn)擊事件onmousedown；

2、鼠標(biāo)移動事件onmousemove；

3、獲取鼠標(biāo)指針X坐標(biāo)clientX；

4、鼠標(biāo)按鍵被松開onmouseup;（有點(diǎn)類似與click點(diǎn)擊）

1、作用域一個函數(shù)擁有一個作用域（局部作用域）

2、怎樣才能實(shí)現(xiàn)鼠標(biāo)移動的時候使滑塊也移動：改變滑塊的left值。

3、想要實(shí)現(xiàn)滑塊跟隨鼠標(biāo)移動，就要獲得鼠標(biāo)移動的x坐標(biāo)。

實(shí)現(xiàn)代碼：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleDocument/title

style

*{

padding:0;

margin:0;

}

body{

user-select:none;

/*禁止用戶選中*/

}

.wrap{

width:300px;

height:40px;

background-color:#e8e8e8;

margin:100pxauto;

text-align:center;

line-height:40px;

/*border-radius:7px;*/

position:relative;

}

.rect{

position:relative;

width:300px;

height:100%;

}

.rec{

position:absolute;

top:0;

left:0;

width:0;

height:100%;

background:#00b894;

}

.silde{

position:absolute;

top:0;

left:0;

z-index:11;

/*在這里面，當(dāng)設(shè)置長寬為40px時在加上邊框1px就會超出40px。

可以使用怪異盒模型，怪異盒模型會使盒子的寬高包括邊框，操持40px；*/

box-sizing:border-box;

width:40px;

height:40px;

background:#fff;

border:1pxsolid#ccc;

}

/style

/head

body

div

div

div滑塊拖拽驗(yàn)證

divimgsrc="hkkkk.png"alt=""/div

/div

/div

/div

script

//獲取事件

varsilde=document.querySelector('.silde');

varrec=document.querySelector('.rec');

varrect=document.querySelector('.rect');

varimg=document.querySelector('img');

varminusX;

//保存變化的X坐標(biāo)（全局變量）

//注冊事件

silde.onmousedown=function(e){

//鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊之后執(zhí)行函數(shù)，獲得點(diǎn)擊位置的X坐標(biāo)

varinitX=e.clientX;

//保存初始按下位置的X坐標(biāo)；

console.log(11,e);

//用以測試

document.onmousemove=function(e){

//鼠標(biāo)移動事件

varmoveX=e.clientX;

//varminusX=moveX-initX;

//變化的坐標(biāo)（要注意作用域的問題，在這里面定義變量，在這個函數(shù)之外的函數(shù)就沒法使用，所以要將minusX變成全局變量）

minusX=moveX-initX;

//這里注意一下，獲得的minusX只是一個差值，沒有單位想讓滑塊的位置改變還需要加上單位px

//這個時候滑塊會跟隨鼠標(biāo)整個頁面一行的跑，價格條件判段，限制滑塊移動的區(qū)域不可以超過邊框，保持left=0。

if(minusX0){

//silde.style.left='0';

minusX=0;

}

if(minusX260){//判斷最大值

//silde.style.left='251';

//這里面的距離用邊框長度減去滑塊的長度300-49

minusX=260;

console.log('我到頭了');

}

silde.style.left=minusX+'px';

rec.style.width=minusX+'px';

if(minusX=260){

rect.style.color='white';

img.src='sure.png';

document.onmousemove=null;

silde.onmousedown=null;

//rect.innerHTML='驗(yàn)證成功';

}

//console.log(222,e,minusX);

//用以測試

}

}

document.onmouseup=function(){

//鼠標(biāo)抬起事件

document.onmousemove=null;

//不允許鼠標(biāo)移動事件發(fā)生

console.log(111);

if(minusX260){//如果沒有到頭

img.src='hkkkk.png';

silde.style.left=0;

//設(shè)置一個left值