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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
頁面JS光標/鼠標坐標，百度統(tǒng)計中有個熱點統(tǒng)計圖，我們要做的就是獲取光標的像素坐標2013-11-11
網(wǎng)頁與鍵盤...2006-07-07
今天小編就為大家分享一篇layer 刷新某個頁面的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
webpack打包中path.resolve(__dirname, 'dist')的含義解
這篇文章主要介紹了webpack打包中path.resolve(__dirname, 'dist')的含義解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夾上拼接了一個文件夾，在打包時，直接生成，本文給大家講解的非常詳細，需要的朋友可以參考下2023-05-05
Bootstrap是一種web框架，是基于HTML,CSS和JS的一種目前較為流行的前端框架。本篇文章將總結(jié)常用組件及其屬性，需要的朋友參考下吧2017-01-01
JavaScript實現(xiàn)點擊復制功能具體代碼(JS訪問剪貼板相關(guān))
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)點擊復制功能(JS訪問剪貼板相關(guān))的相關(guān)資料,復制功能指的是將一個文本或者圖片等資源從一個位置通過復制的方式再次拷貝到另一個位置,需要的朋友可以參考下2023-10-10
為了讓一個廣告幾秒以后再執(zhí)行所以做個延遲加載的東東，用了JS實現(xiàn)，還蠻好用的，算是分享，也是記錄吧。2010-07-07
JS+JSP通過img標簽調(diào)用實現(xiàn)靜態(tài)頁面訪問次數(shù)統(tǒng)計的方法
這篇文章主要介紹了JS+JSP通過img標簽調(diào)用實現(xiàn)靜態(tài)頁面訪問次數(shù)統(tǒng)計的方法,基于JavaScript動態(tài)調(diào)用jsp頁面通過對TXT文本文件的讀寫實現(xiàn)統(tǒng)計訪問次數(shù)的功能,需要的朋友可以參考下2015-12-12
微信小程序中的wxs文件,大家或多或少都有見過,下面這篇文章主要給大家介紹了關(guān)于微信小程序生命周期和WXS使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
table tr行內(nèi)td里面的input的值2009-12-12