jquery 手勢密碼插件
更新時間：2017年03月17日 14:13:16 作者：sunny紅
本文主要介紹了jquery手勢密碼插件的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="../dist/css/danmuplayer.css" rel="external nofollow" >-->
</head>
<body>
正確的密碼是一個字母“Z”的形狀哦！
<div id="gesturepwd"></div>
</body>
<script src="http://www.jq22.com/demo/jQueryGesturePassword20161102/jquery-2.1.4.min.js"></script>
<script src="http://www.jq22.com/demo/jQueryGesturePassword20161102/src/jquery.gesture.password.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>
$("#gesturepwd").GesturePasswd({
backgroundColor:"#252736", //背景色
color:"#FFFFFF", //主要的控件顏色
roundRadii:25, //大圓點的半徑
pointRadii:6, //大圓點被選中時顯示的圓心的半徑
space:30, //大圓點之間的間隙
width:240, //整個組件的寬度
height:240, //整個組件的高度
lineColor:"#00aec7", //用戶劃出線條的顏色
zindex :100 //整個組件的css z-index屬性
});
$("#gesturepwd").on("hasPasswd",function(e,passwd){
var result;
if(passwd == "1235789"){
result=true;
}
else {
result=false;
}
if(result == true){
$("#gesturepwd").trigger("passwdRight");
setTimeout(function(){
//密碼驗證正確后的其他操作，打開新的頁面等。。。
alert("密碼正確！")
},500); //延遲半秒以照顧視覺效果
}
else{
$("#gesturepwd").trigger("passwdWrong");
//密碼驗證錯誤后的其他操作。。。
}
});
</script>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
下面小編就為大家?guī)硪黄猨query之基本選擇器practice(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
jQuery.buildFragment使用方法與思路分析以及源碼注釋分析等等，感興趣的朋友可以了解下哦2013-01-01
開發(fā)人員利用jQuery代碼不僅能給網(wǎng)站帶來各種動畫、特效，還會提高網(wǎng)站的用戶體驗。本文總結(jié)了開發(fā)者經(jīng)常使用的15個jQuery代碼片段，大家可以直接拿來用。2015-09-09
jquery表單驗證插件（jquery.validate.js）的3種使用方式
這篇文章主要介紹了jquery表單驗證插件（jquery.validate.js）的3種使用方式,本文用詳細的代碼實例講解jquery表單驗證插件的使用,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery中prop()方法用法,以實例形式較為詳細的分析了prop()方法的功能、定義及獲取或者設(shè)置匹配元素屬性值的各種常見使用技巧,需要的朋友可以參考下2015-01-01
本篇文章主要是對jquery改變tr背景色的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
基于JQuery實現(xiàn)滾動到頁面底端時自動加載更多信息
這篇文章主要介紹了基于JQuery實現(xiàn)滾動到頁面底端時自動加載更多信息，類似微博，新浪新聞的評論等，都采用了這方法,需要的朋友可以參考下2014-01-01
各式各樣的導(dǎo)航條效果css3結(jié)合jquery代碼實現(xiàn)
這篇文章主要為大家分享了css3結(jié)合jquery代碼實現(xiàn)各式各樣的導(dǎo)航條效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本文給大家介紹jquery選擇器的相關(guān)知識，并通過案例給大家介紹jquery知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
Jquery模仿Baidu、Google搜索時自動補充搜索結(jié)果提示
昨天研究了一下Jquery 模仿Baidu、Google收索時自動補充收索結(jié)果的提示，感覺效果還行，下面與大家分享下代碼2013-12-12