html5仿触屏手机手势解锁密码特效



58 228 77



特效描述:html5 仿触屏手机 手势解锁 密码特效,html5手势解锁密码特效

代码结构

1. 引入JS

<script type="text/javascript" src="src/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="src/jquery.gesture.password.js"></script>

2. HTML代码

<center><br><br>
正确的密码是一个字母“Z”的形状哦!<br><br><br>
<div id="gesturepwd"></div>
</center>
<script type="text/javascript">
$("#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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 图片拖动 图片拖拽

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到