javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
實(shí)現(xiàn)效果:
css樣式代碼略。
html代碼:
頁(yè)面上導(dǎo)入了jquery.mobile 、jquery
<div id="pageSlide">
<input type="hidden" value="" id="captcha"/>
<div id="slider" class="slider">
<span id="label" class="label"></span>
<span id="lableTip">Slide to confirm I am human!</span>
</div>
</div>
js代碼:
<script type="text/javascript">
window.onload = function () {
var slider1 = new Slider();
slider1.Init();
///屏幕大小發(fā)生改變時(shí)觸發(fā)
$(window).resize(function () {
slider1.HanderIn();
slider1.HanderOut();
});
}
//滑動(dòng)條對(duì)象
function Slider(swipestart, min, max, index, IsOk, lableIndex) {
var _self = this;
//是否開始滑動(dòng)
_self.swipestart = swipestart;
//最小值
_self.min = min;
//最大值
_self.max = max;
//當(dāng)前滑動(dòng)條所處的位置
_self.index = index;
//是否滑動(dòng)成功
_self.IsOk = IsOk;
//鼠標(biāo)在滑動(dòng)按鈕的位置
_self.lableIndex = lableIndex;
}
//初始化
Slider.prototype.Init = function () {
var _self = this;
$("#label").on("mousedown", function (event) {
var e = event || window.event;
_self.lableIndex = e.clientX - this.offsetLeft;
_self.HanderIn();
});
$("#pageSlide").on("mousemove", function (event) {
_self.HanderMove(event);
});
$(document).on("mouseup", function (event) {
_self.HanderOut();
});
$("#label").on("touchstart", function (event) {
var e = event || window.event;
_self.lableIndex = e.originalEvent.pageX - this.offsetLeft;
_self.HanderIn();
});
$("#pageSlide").on("touchmove", function (event) {
_self.HanderMove(event, "mobile");
});
$(document).on("touchend", function (event) {
_self.HanderOut();
});
}
//鼠標(biāo)/手指接觸滑動(dòng)按鈕
Slider.prototype.HanderIn = function () {
var _self = this;
_self.swipestart = true;
_self.min = 0;
_self.max = $("#slider").width();
}
//鼠標(biāo)/手指移出
Slider.prototype.HanderOut = function () {
var _self = this;
//停止
_self.swipestart = false;
_self.Move();
}
//鼠標(biāo)/手指移動(dòng)
Slider.prototype.HanderMove = function (event, type) {
var _self = this;
if (_self.swipestart) {
event.preventDefault();
var event = event || window.event;
if (type == "mobile") {
_self.index = event.originalEvent.pageX - _self.lableIndex;
} else {
_self.index = event.clientX - _self.lableIndex;
}
_self.Move();
}
}
//鼠標(biāo)/手指移出
Slider.prototype.Move = function () {
var _self = this;
$(".warn").text("index:" + _self.index + ", max" + _self.max + ",lableIndex:" + _self.lableIndex + ",value:" + $("#captcha").val() + " date:" + new Date().getUTCDate());
if ((_self.index + 20) >= _self.max) {
_self.index = _self.max - 20;
}
if (_self.index < 0) {
_self.index = _self.min;
}
$(".label").css("left", _self.index + "px");
if (_self.index == (_self.max - 20)) {
//停止
_self.swipestart = false;
_self.IsOk = true;//解鎖
$("#captcha").val(1);
var style = {"filter": "alpha(opacity=1)",
"-moz-opacity": "1", "opacity": "1"}
$(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);
$("#slider").css("background-color", "#E5EE9F");
$("#lableTip").text("Thank You!");
} else {
_self.IsOk = false;//未解鎖
$("#captcha").val(0);
var style = { "filter": "alpha(opacity=0.2)",
"-moz-opacity": "0.2", "opacity": "0.2"}
$(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);
$("#slider").css("background-color", "#FDEB9C");
$("#lableTip").text("Slide to confirm I am human!");
}
}
</script>
效果實(shí)現(xiàn):
- jQuery使用unlock.js插件實(shí)現(xiàn)滑動(dòng)解鎖
- javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
- js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證
- JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能完整示例
- js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
- 使用 Node.js 模擬滑動(dòng)拼圖驗(yàn)證碼操作的示例代碼
- JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果
- javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲
- 原生js實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)解鎖功能?js實(shí)現(xiàn)滑動(dòng)拼圖解鎖
相關(guān)文章
IE網(wǎng)頁(yè)js語法錯(cuò)誤2行字符1、FF中正常的解決方法
使用模態(tài)窗體則會(huì)先彈出此錯(cuò)誤然后再顯示新打開的界面,經(jīng)搜索找到不錯(cuò)的解決方法,有類似問題的朋友可以參考下,希望對(duì)大家有所幫助2013-09-09每日十條JavaScript經(jīng)驗(yàn)技巧(一)
本文是每日十條JavaScript經(jīng)驗(yàn)技巧系列文章的第一篇,給大家匯總介紹一些在JavaScript使用過程中的注意事項(xiàng),非常的簡(jiǎn)單,都是個(gè)人在平時(shí)項(xiàng)目中的一點(diǎn)小小的總結(jié),希望對(duì)大家能夠有所幫助2016-06-06網(wǎng)頁(yè)中表單按回車就自動(dòng)提交的問題的解決方案
這篇文章主要介紹了網(wǎng)頁(yè)中表單按回車就自動(dòng)提交的問題的解決方案,需要的朋友可以參考下2014-11-11js常用的鍵盤事件有哪些(用法示例)_鍵碼keyCode對(duì)照表
用戶按下鍵盤上的鍵,首先會(huì)觸發(fā)keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框發(fā)生變化之前被觸發(fā);而keyup在文本框發(fā)生變化之后被觸發(fā)。如果用戶按下一個(gè)鍵不放,就會(huì)重復(fù)觸發(fā)keydown和keypress事件。2023-02-02javascript學(xué)習(xí)筆記(三)顯示當(dāng)時(shí)時(shí)間的代碼
主要是為了熟悉javascript中在date對(duì)象,大家可以看下。2011-04-04JavaScript中幾個(gè)重要的屬性(this、constructor、prototype)介紹
this表示當(dāng)前對(duì)象,如果在全局作用范圍內(nèi)使用this,則指代當(dāng)前頁(yè)面對(duì)象window,prototype本質(zhì)上還是一個(gè)JavaScript對(duì)象,constructor始終指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)2013-05-05網(wǎng)絡(luò)傳輸協(xié)議(http協(xié)議)
網(wǎng)絡(luò)傳輸協(xié)議(http協(xié)議)指服務(wù)器和客戶端間進(jìn)行通信時(shí)的約束和規(guī)范,客戶端與服務(wù)端的數(shù)據(jù)交互并不是雜亂無章的,需要遵照(基于)一定的規(guī)范進(jìn)行,本文主要介紹http超文本傳輸協(xié)議。希望對(duì)大家有所幫助2016-11-11JavaScript onkeydown事件入門實(shí)例(鍵盤某個(gè)按鍵被按下)
這篇文章主要介紹了JavaScript onkeydown事件入門實(shí)例,onkeydown事件捕捉鍵盤上某個(gè)按鍵被按下的情況,需要的朋友可以參考下2014-10-10