Home > Article > Web Front-end > jquery implements gesture unlocking source code

jquery implements gesture unlocking source code

韦小宝Original: 2017-11-18 10:17:062175browse

Gesture unlockingIt must be very common for us. Gesture unlockingimplemented by jqueryHave you seen it before~ Provide free source codeOh~~Take it and study it~~

##Code:

<!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>

Get it for free and study it! More good source codes are available on PHP Chinese website, follow us and give you a good look~

Related recommendations:

css implementation of moving cat face

Native js implementation of drop-down list box

js original sound implementation Simple WeChat chat function

The above is the detailed content of jquery implements gesture unlocking source code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What should I do if the web page is iframed?Next article：What should I do if the web page is iframed?

See more

jquery implements gesture unlocking source code

Related articles