jquery實現手勢解鎖源碼

韦小宝
發布: 2017-11-18 10:17:06
原創
2235 人瀏覽過

手勢解鎖對我們來說肯定是很常見的,用jquery實現的手勢解鎖見過嘛~免費提供源碼哦~~拿去研究吧~~

jquery實現手勢解鎖源碼

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

,關注我們給你好看哦~

###相關推薦:########### #######css實作會動的貓臉###############原生js實作下拉列錶框###########js原聲實現簡單的微信聊天功能######

以上是jquery實現手勢解鎖源碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!