jquery implémente le code source de déverrouillage gestuel-tutoriel HTML-php.cn

jquery implémente le code source de déverrouillage gestuel

韦小宝

Libérer： 2017-11-18 10:17:06

original

2173 Les gens l'ont consulté

Le déverrouillage gestuel est définitivement très courant pour nous. Le déverrouillage gestuel implémenté à l'aide de jqueryL'avez-vous déjà vu le code source est fourni gratuitement ? Oh~~Prenez-le et étudiez-le~~

jquery implémente le code source de déverrouillage gestuel

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>

Copier après la connexion

Prenez-le gratuitement et étudiez-le ! D'autres bons codes sources sont disponibles sur le Site Web PHP chinois, suivez-nous pour vous donner un bon aperçu~

Recommandations associées :

Implémentation CSS d'une tête de chat en mouvement

Implémentation en js natif d'une zone de liste déroulante

Implémentation du son original js Fonction de chat simple WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!