html5仿觸屏手機手勢解鎖密碼特效



60 238 80



特效描述: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

加群請備注:從官網了解到

老夫子电子