jquery 手勢(shì)密碼插件
更新時(shí)間：2017年03月17日 14:13:16 作者：sunny紅
本文主要介紹了jquery手勢(shì)密碼插件的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
效果圖：
代碼如下：
<!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>
正確的密碼是一個(gè)字母“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, //大圓點(diǎn)的半徑
pointRadii:6, //大圓點(diǎn)被選中時(shí)顯示的圓心的半徑
space:30, //大圓點(diǎn)之間的間隙
width:240, //整個(gè)組件的寬度
height:240, //整個(gè)組件的高度
lineColor:"#00aec7", //用戶(hù)劃出線(xiàn)條的顏色
zindex :100 //整個(gè)組件的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(){
//密碼驗(yàn)證正確后的其他操作，打開(kāi)新的頁(yè)面等。。。
alert("密碼正確！")
},500); //延遲半秒以照顧視覺(jué)效果
}
else{
$("#gesturepwd").trigger("passwdWrong");
//密碼驗(yàn)證錯(cuò)誤后的其他操作。。。
}
});
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
jquery表單驗(yàn)證實(shí)例仿Toast提示效果
這篇文章主要介紹了jquery驗(yàn)證表單仿Toast提示效果,實(shí)現(xiàn)代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的朋友可以參考下2017-03-03
基于jQuery實(shí)現(xiàn)搜索關(guān)鍵字自動(dòng)匹配功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)搜索關(guān)鍵字自動(dòng)匹配功能，自動(dòng)匹配搜索關(guān)鍵詞功能廣泛應(yīng)用到搜索引擎當(dāng)中，感興趣的小伙伴們可以參考一下2015-10-10
jquery實(shí)現(xiàn)html頁(yè)面 div 假分頁(yè)有原理有代碼
大概原理就是填充后div的總高度 （1000px） 顯示高度（100px） 則頁(yè)面總數(shù)為10頁(yè) 。當(dāng)查看第二頁(yè)時(shí)，顯示的div高度為100 - 200之間，以此類(lèi)推2014-09-09
使用jQuery給Table動(dòng)態(tài)增加行、清空table的方法
這篇文章主要介紹了使用jQuery給Table動(dòng)態(tài)增加行、清空table的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09 
很多朋友對(duì)jquery select的操作很有興趣，但網(wǎng)上的東西太多，所以腳本之家特別將Jquery Select操作方法整理下，方便大家查找。
2010-05-05 
jquery的ajax從純真網(wǎng)(cz88.net)獲取IP地址對(duì)應(yīng)地區(qū)名
使用jquery的ajax，輕松從純真網(wǎng)(cz88.net)獲取IP地址對(duì)應(yīng)地區(qū)名
2009-12-12 
本文給大家分享的是一款基于jQuery制作的多功能的輪播幻燈插件，支持多種配置，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04 
jQuery 技巧，以前發(fā)布了很多了，具體的可以參考腳本之家以前發(fā)布的文章。
2010-04-04 
jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話(huà)框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話(huà)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02