JavaScript實現(xiàn)滑塊驗證碼
更新時間：2021年11月07日 16:01:10 作者：雪旭
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)滑塊驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)滑塊驗證碼的具體代碼，供大家參考，具體內(nèi)容如下
效果：鼠標在底部滑塊上按下按住不松拖動可以移動滑塊，上面大圖里面帶有小圖背景的滑塊也會跟隨移動，移動到大圖背景缺少區(qū)域即可完成驗證。以上效果要實現(xiàn)，需要鼠標按下（mousedown事件），鼠標松開（mouseup事件），鼠標移動（mousemove事件）這幾個事件。
先制作html部分實現(xiàn)靜態(tài)效果，大圖里面可移動的小塊背景大小與大圖一致，給小圖塊的背景添加background-position屬性來控制小圖要顯示的圖片區(qū)域
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #34495e;
}
.wrap{
width: 600px;
margin: 100px auto;
}
.banner{
width: 600px;
height: 400px;
background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
background-size: 600px 400px;
position: relative;
}
.blank-box{
position: absolute;
top: 100px;
left: 200px;
width: 50px;
height: 50px;
background: #fff;
}
.block{
position: absolute;
top: 100px;
left: 0;
width: 50px;
height: 50px;
background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
background-size:600px 400px;
background-position:-200px -100px;
border: 1px solid red;
}
.move{
position: relative;
}
.move p{
height: 50px;
line-height: 50px;
font-size: 16px;
color: #666;
background: #eee;
text-align: center;
}
.move-block{
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background:#1abc9c;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="blank-box"></div>
<div class="block"></div>
</div>
<div class="move">
<p>移動滑塊>>></p>
<div class="move-block"></div>
</div>
</div>
</body>
</html>
JS部分：
獲取需要的dom元素，鼠標在底部滑塊上按下時，才能移動，所以在這個滑塊上綁定一個鼠標按下事件，在這個事件里通過event這個對象獲取鼠標的坐標點并減去小塊的偏移量來獲取滑塊移動的偏差值（鼠標的坐標點減去這個偏差值才是真實移動的距離），移動狀態(tài)變?yōu)榭苫瑒印?/p>
let banner=document.querySelector('.banner');
let blankBox=document.querySelector('.blank-box');
let block=document.querySelector('.block');
let moveBlock=document.querySelector('.move-block');
let isDrop=false;//是否可滑動
let x,y;//偏移量
moveBlock.onmousedown=function(e){
var e=e||window.event;
x=e.clientX - block.offsetLeft;
y=e.clientY - block.offsetTop;
isDrop=true;
}
當滑動狀態(tài)為true時，用鼠標的坐標點減去這個偏差值，并對二個可移動的滑塊重新定位?；瑝K滑動到大圖缺少區(qū)域即為驗證成功。
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left= e.clientX-x;
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//200大圖里面缺失區(qū)域距離左邊的位置
if(Math.abs(left-200)<=3){
alert('驗證成功');
}
}
}
到這里已經(jīng)初步實現(xiàn)效果了，但是滑塊會超出大圖的范圍，需要給滑塊的滑動距離加個限定，不然它會超出大圖的范圍，
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left= e.clientX-x;
let maxX=banner.offsetWidth-block.offsetWidth;
//范圍限定
if(left<0){
left=0
}
if(left>maxX){
left=maxX
}
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//200大圖里面缺失區(qū)域距離左邊的位置
if(Math.abs(left-200)<=3){
alert('驗證成功');
}
}
}
鼠標松開可移動狀態(tài)變?yōu)閒alse,為了防止移動過快，把事件綁定到document上
document.onmouseup=function(){
isDrop=false;
}
到這里效果已經(jīng)實現(xiàn)了，如果想要背景大圖的缺失區(qū)域是隨機的可以加個，隨機定位函數(shù)。
//隨機定位
function randomPosition(){
/*隨機數(shù)公式取 n-m之間的隨機數(shù) Math.random() * (m-n)+n*/
let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);
blankBox.style.left=ranX+'px';
blankBox.style.top=ranY+'px';
block.style.top=ranY+'px';
block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
}
全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #34495e;
}
.wrap{
width: 600px;
margin: 100px auto;
}
.banner{
width: 600px;
height: 400px;
background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
background-size: 600px 400px;
position: relative;
}
.blank-box{
position: absolute;
top: 100px;
left: 200px;
width: 50px;
height: 50px;
background: #fff;
}
.block{
position: absolute;
top: 100px;
left: 0;
width: 50px;
height: 50px;
background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
background-size:600px 400px;
background-position:-200px -100px;
border: 1px solid red;
}
.move{
position: relative;
}
.move p{
height: 50px;
line-height: 50px;
font-size: 16px;
color: #666;
background: #eee;
text-align: center;
}
.move-block{
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background:#1abc9c;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="blank-box"></div>
<div class="block"></div>
</div>
<div class="move">
<p>移動滑塊>>></p>
<div class="move-block"></div>
</div>
</div>
<script>
let banner=document.querySelector('.banner');
let blankBox=document.querySelector('.blank-box');
let block=document.querySelector('.block');
let moveBlock=document.querySelector('.move-block');
let isDrop=false;//是否可滑動
let x,y,targetleft;//偏移量,左邊定位距離
moveBlock.onmousedown=function(e){
var e=e||window.event;
x=e.clientX - block.offsetLeft;
y=e.clientY - block.offsetTop;
isDrop=true;
}
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left= e.clientX-x;
let maxX=banner.offsetWidth-block.offsetWidth;
//范圍限定
if(left<0){
left=0
}
if(left>maxX){
left=maxX
}
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//200大圖里面缺失區(qū)域距離左邊的位置
if(Math.abs(left-targetleft)<=5){
alert('驗證成功');
}
}
}
document.onmouseup=function(){
isDrop=false;
}
//隨機定位
function randomPosition(){
/*隨機數(shù)公式取 n-m之間的隨機數(shù) Math.random() * (m-n)+n*/
let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);
targetleft=ranX;
blankBox.style.left=ranX+'px';
blankBox.style.top=ranY+'px';
block.style.top=ranY+'px';
block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
}
randomPosition()
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了小程序實現(xiàn)篩子抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了js數(shù)組與字符串的相互轉換方法,是js中常用的技巧,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了用原生JS實現(xiàn)愛奇藝首頁導航欄代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
JavaScript觀察者模式(publish/subscribe)原理與實現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實現(xiàn)方法,簡單分析了javascript觀察者模式的原理、功能并結合實例形式給出了觀察者模式的實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
使用setTimeout實現(xiàn)SetInterval原理解析
這篇文章主要為大家介紹了使用setTimeout實現(xiàn)SetInterval原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
快速獲取/設置iframe內(nèi)對象元素的幾種js實現(xiàn)方法
下面小編就為大家?guī)硪黄焖佾@取/設置iframe內(nèi)對象元素的幾種js實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
javascript實現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器
這篇文章主要介紹了javascript實現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器,這個IOS APP一般是Web APP,否則沒法使用本文的代碼,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JS校驗與最終登陸界面功能,結合完整實例形式詳細分析了JavaScript登錄界面校驗功能與正則驗證相關操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了zepto.js中tap事件阻止冒泡的實現(xiàn)方法,實例分析了由冒泡產(chǎn)生的click延遲解決方法,需要的朋友可以參考下2015-02-02
js中有各種與位置相關的屬性,每次看到的時候都各種懵逼,索性一次總結一下,這篇文章主要給大家介紹了關于js中位置計算的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09