Rumah > Artikel > hujung hadapan web > jquery实现手势解锁源码
jquery实现手势解锁源码
- 韦小宝asal
- 2017-11-18 10:17:062237semak imbas
手势解锁对于我们来说肯定是很常见的，用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中文网，关注我们给你好看哦~
相关推荐：
Atas ialah kandungan terperinci jquery实现手势解锁源码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：网页被iframe了怎么办？Artikel seterusnya：css波纹动画