簡單的滑動驗證碼JS插件 圖片驗證碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="RedJu.css">
<script type="text/javascript" src="RedJu.js"></script>
</head>
<body>
<div id="slideVerify">
<div class="image">
<div class="chip2"></div>
<div class="chip"></div>
</div>
<div class="drag">
<div class="bg"></div>
<div class="text" onselectstart="return false;">請拖動滑塊解鎖</div>
<div class="btn">>></div>
</div>
</div>
<script type="text/javascript">
var slideVerify = new SlideVerify("img/",9);
</script>
</body>
</html>
//;分號開頭，用於防止代碼壓縮合並時與其它代碼混在一起造成語法錯誤
//而事實證明，uglify壓縮工具會將無意義的前置分號去掉，我只是習慣了這麼寫
//(function(){})();立即執行函數，閉包，避免污染全局變量
//通常一個插件只暴露一個變量給全局供其它程序調用
//還有其它寫法，運算符+函數體+括號
//例：!function(){}(); +function(){}(); -function(){}();
// void function(){}(); 等等只要能對函數返回值進行運算的符號都可以
;(function(global) {
//開啓嚴格模式，規範代碼，提高瀏覽器運行效率
//"use strict";
//定義一個類，通常首字母大寫
var SlideVerify = function(path,num) {
var slideVerify = document.getElementById('slideVerify'),
chip = slideVerify.getElementsByClassName('chip')[0],//圖片小塊
chip2 = slideVerify.getElementsByClassName('chip2')[0],
box = slideVerify.getElementsByClassName('drag')[0],
bg = slideVerify.getElementsByClassName('bg')[0],
text = slideVerify.getElementsByClassName('text')[0],
btn = slideVerify.getElementsByClassName('btn')[0],
image = slideVerify.getElementsByClassName('image')[0],
offsetX,//鼠標滑動距離
distance,// = //滑動成功的寬度（距離）
sildeWidth = box.offsetWidth - btn.offsetWidth,
status =false,
imgAt = Math.floor(Math.random()*num);
//var img = document.createElement('img');
//image.appendChild(img);
image.style.background = 'url('+path+imgAt+'.jpg)';
var getStatus = function(){
return status;
}
//二、給滑塊註冊鼠標按下事件
btn.onmousedown = function(e){
//1.鼠標按下之前必須清除掉後面設置的過渡屬性
btn.style.transition = "";
bg.style.transition ="";
//說明：clientX 事件屬性會返回當事件被觸發時，鼠標指針向對於瀏覽器頁面(或客戶區)的水平座標。
//2.當滑塊位於初始位置時，得到鼠標按下時的水平位置
var e = e || window.event;
var downX = e.clientX;
//加載圖片小塊
ry = Math.floor(Math.random()*80)+20;
rx = Math.floor(Math.random()*150)+110;
chip.style.background = 'url('+path+imgAt+'.jpg)';
chip.style.top = ry+'px';
chip.style.backgroundPositionX = -rx+ 'px';
chip.style.backgroundPositionY = -ry+ 'px';
chip2.style.background = 'url('+path+imgAt+'.jpg)';
chip2.style.top = ry+'px';
chip2.style.left = rx+'px';
chip2.style.backgroundPositionX = -rx+ 'px';
chip2.style.backgroundPositionY = -ry+ 'px';
chip2.style['box-shadow'] = '5px 5px 10px black';
distance = rx;
//三、給文檔註冊鼠標移動事件
document.onmousemove = function(e){
var e = e || window.event;
//1.獲取鼠標移動後的水平位置
var moveX = e.clientX;
//2.得到鼠標水平位置的偏移量（鼠標移動時的位置 - 鼠標按下時的位置）
offsetX = moveX - downX;
//3.在這裏判斷一下：鼠標水平移動的距離 與 滑動成功的距離 之間的關係
if( offsetX > sildeWidth){
offsetX = sildeWidth;//如果滑過了終點，就將它停留在終點位置
}else if( offsetX < 0){
offsetX = 0;//如果滑到了起點的左側，就將它重置爲起點位置
}
//4.根據鼠標移動的距離來動態設置滑塊的偏移量和背景顏色的寬度
btn.style.left = offsetX + "px";
bg.style.width = offsetX + "px";
chip.style.left = offsetX + "px";
}
//四、給文檔註冊鼠標鬆開事件
document.onmouseup = function(e){
//如果鼠標的水平移動距離 = 滑動成功的寬度
if( offsetX - distance<8 && offsetX - distance>-8){
//1.設置滑動成功後的樣式
text.innerHTML = "驗證通過";
text.style.color = "#fff";
btn.innerHTML = "√";
btn.style.color = "green";
bg.style.backgroundColor = "lightgreen";
bg.style.width = sildeWidth + "px";
btn.style.left = sildeWidth + "px";
status = true;
//成功後，清除掉鼠標按下事件和移動事件（因爲移動時並不會涉及到鼠標鬆開事件）
btn.onmousedown = null;
document.onmousemove = null;
image.onmousedown = null;
//3.成功解鎖後的回調函數
// setTimeout(function(){
// alert('解鎖成功！');
// },100);
}else{
//反之，則將滑塊復位（設置了1s的屬性過渡效果）
btn.style.left = 0;
bg.style.width = 0;
// btn.style.transition = "left 1s ease";
// bg.style.transition = "width 1s ease";
imgAt = Math.floor(Math.random()*num);
image.style.background = 'url('+path+imgAt+'.jpg)';
chip.style.background = null;
chip2.style.background = null;
chip2.style['box-shadow'] = null;
}
//只要鼠標鬆開了，說明此時不需要拖動滑塊了，那麼就清除鼠標移動和鬆開事件。
document.onmousemove = null;
document.onmouseup = null;
}
}
return {getStatus};
};
//覆寫原型鏈，給繼承者提供方法
SlideVerify.prototype = {
init: function() {
}
};
//兼容CommonJs規範
if (typeof module !== 'undefined' && module.exports) module.exports = SlideVerify;
//兼容AMD/CMD規範
if (typeof define === 'function') define(function() { return SlideVerify; });
//註冊全局變量，兼容直接使用script標籤引入該插件
global.SlideVerify = SlideVerify;
//this，在瀏覽器環境指window，在nodejs環境指global
//使用this而不直接用window/global是爲了兼容瀏覽器端和服務端
//將this傳進函數體，使全局變量變爲局部變量，可縮短函數訪問全局變量的時間
})(this);
#slideVerify .drag{
width: 300px;
height: 40px;
line-height: 40px;
background-color: #e8e8e8;
position: relative;
margin:0 auto;
}
#slideVerify .bg{
width:40px;
height: 100%;
position: absolute;
background-color: #75CDF9;
}
#slideVerify .text{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
user-select: none;
}
#slideVerify .btn{
width:40px;
height: 38px;
position: absolute;
border:1px solid #ccc;
cursor: pointer;
font-family: "宋體";
text-align: center;
background-color: #fff;
user-select: none;
color:#666;
}
#slideVerify .chip{
width: 40px;
height: 40px;
position: absolute;
}
#slideVerify .chip2{
width: 40px;
height: 40px;
position: absolute;
-webkit-filter: brightness(0.5) opacity(0.5);
}
#slideVerify .image{
width: 300px;
height: 200px;
position:relative;
margin: 0 auto
}
效果：
