明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

jquery完成手勢解鎖源碼

發(fā)表時間：2024-05-13 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]手勢解鎖對于我們來說肯定是很常見的，用jquery實現(xiàn)的手勢解鎖見過嘛~免費提供源碼哦~~拿去研究吧~~代碼：<!DOCTYPE html><html><head><meta charset="UTF-8"><title&g...
手勢解鎖對于我們來說肯定是很常見的，用jquery實現(xiàn)的手勢解鎖見過嘛~免費提供源碼哦~~拿去研究吧~~

%{[7D1W)WDP62@S[@)`C5AG.png

代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PHP中文網(wǎng)</title>
</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>

免費拿去研究吧！更多好的源碼盡在PHP中文網(wǎng)，關(guān)注我們給你好看哦~

相關(guān)推薦：

css實現(xiàn)會動的貓臉

原生js實現(xiàn)下拉列表框

js原聲實現(xiàn)簡單的微信聊天功能

以上就是jquery實現(xiàn)手勢解鎖源碼的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

相關(guān)文章