jQuery仿iPhone用户登录框显示效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿iPhone用户登录框显示效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iPass plugin demo</title>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="iPass.packed.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	// to enable iPass plugin
	$("input[type=password]").iPass();
	
	// for the demo
	$("button").click(function() {
		alert("Password: "+$("#demo2").val());
	})
});
</script>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="headerBox">
    <h1>iPass jQuery plugin preview</h1>
</div>
<div class="loginBox">
    <h1>Please login</h1>
    <div class="inputBox">
        <label for="demo1">Username</label>
        <input id="demo1" name="demo1" type="text" value="" />
    </div>
    <div class="inputBox">
        <label for="demo2">Password</label>
        <input id="demo2" name="demo2" type="password" value="" />
    </div>       
    <button>show password</button>
</div>
</body>
</html>

JS代码(iPass.packed.js):

// ---------------------------------------------------------------------- //// iPass - Iphone-like masked password input// version 1.0// author:pixelboi8 (pixelboi8@gmail.com)// created:12/12/2010// ---------------------------------------------------------------------- //eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--){
	d[e(c)]=k[c]||e(c)}
k=[function(e){
	return d[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--){
	if(k[c]){
	p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('(8($){
	$.1e.1l=8(D){
	2 c={
	\'I\':1r,\'1a\':1q,\'e\':\'%1w\'}
;
	5(D){
	$.1p(c,D)}
2 v=[];
	2 l=[];
	2 T=1n 1s(\'[^\'+c[\'e\']+\']\',\'1v\');
	2 i=0;
	4.W(8(6){
	2 G=\'-\'+6;
	2 t=$(4);
	2 3=4.3;
	2 q=4.q;
	2 h=3+G;
	2 11=3+G;
	5(!3||!q){
	1t("1m 1d 1c \'3\' 1b \'q\' 1f w 1g!");
	12 16}
$(\'<a 3="\'+h+\'" q="\'+11+\'" 1i="Q" 1h="1u" />\').1M(t);
	2 A=$(\'#\'+h);
	2 g=$(\'#\'+h)[0];
	5(4.x){
	g.x=4.x}
5(4.F){
	g.F=4.F}
5(4.E){
	g.E=4.E}
5(4.z&&4.z!=\'-1\'){
	g.z=4.z}
5(4.N){
	g.N=4.N}
5(4.H){
	g.H=4.H}
5(4.B){
	g.B=4.B}
5(4.L){
	g.L=4.L}
4.x=\'\';
	4.B=\'\';
	t.1O();
	A.Z(\'1J\',8(){
	2 m=A.j();
	v[6]=V(8(){
	M(6,3,h,m)}
,c[\'I\'])}
);
	A.Z(\'1A\',8(){
	e(6,h);
	18(v[6])}
);
	$(\'X\').W(8(){
	5(4.J==3){
	4.J=h}
n 5(t[0].13.1y.1C()==\'X\'){
	t[0].13.J=h}
}
)}
);
	M=8(6,r,3,m){
	2 o=$(\'#\'+3).j();
	5(o!=m){
	19(6,r,3)}
n{
	e(6,3)}
m=o;
	v[6]=V(8(){
	M(6,r,3,m)}
,c[\'I\'])}
;
	19=8(6,r,3){
	2 7=P(3);
	2 K=16;
	2 p=$(\'#\'+3);
	2 C=$(\'#\'+r);
	2 9=p.j().17(\'\');
	2 d=C.j().17(\'\');
	5(l[6]){
	18(l[6]);
	l[6]=10}
w(i=0;
	i<9.f;
	i++){
	5(9[i]!=d[i]){
	5(9[i]!=u(c[\'e\'])){
	d.O(i,0,9[i])}
n{
	d[i]=d[i]}
}
n{
	d.O(i,0,9[i])}
}
5(9.f<d.f){
	d.O(7.k,d.f-9.f,\'\')}
w(i=0;
	i<9.f;
	i++){
	5(9[i]!=u(c[\'e\'])){
	K=i}
}
w(i=0;
	i<9.f;
	i++){
	5(i<K){
	9[i]=u(c[\'e\'])}
}
p.j(9.15(\'\'));
	C.j(d.15(\'\'));
	R(3,7)}
;
	e=8(6,3){
	2 7=P(3);
	2 p=$(\'#\'+3);
	2 o=p.j();
	5(!l[6]&&o.1K(T)!=10){
	l[6]=V(8(){
	p.j(o.1j(T,u(c[\'e\'])));
	R(3,7)}
,c[\'1a\'])}
}
;
	P=8(3){
	2 a=$(\'#\'+3)[0];
	2 7={
	k:0,s:0}
;
	5(a.S){
	7.k=a.1B;
	7.s=a.1D}
n 5(a.y){
	2 Y=1H.b.1Q().1E();
	2 b=a.y();
	2 U=b.1F();
	b.1G(Y);
	U.1z(\'1I\',b);
	7.k=U.Q.f;
	7.s=7.k+b.Q.f}
12 7}
;
	R=8(3,7){
	2 a=$(\'#\'+3)[0];
	5(a.S){
	a.S(7.k,7.s)}
n 5(a.y){
	2 b=a.y();
	b.1L(1x);
	b.1N(\'14\',7.s);
	b.1k(\'14\',7.k);
	b.1o()}
}
}
}
)(1P);
	',62,115,'||var|id|this|if|index|pos|function|inputChars|input|selection|settings|passChars|maskChar|length|newElem|newId||val|start|maskTimeout|oldValue|else|curValue|inpObj|name|oldId|end|obj|unescape|checkTimeout|for|accessKey|createTextRange|maxLength|newObj|tabIndex|passObj|options|disabled|className|suffix|size|checkInterval|htmlFor|lastInputChar|title|checkChange|readOnly|splice|getCurPos|text|setCurPos|setSelectionRange|regex|before|setTimeout|each|label|bookmark|bind|null|newName|return|parentNode|character|join|false|split|clearTimeout|setPass|maskDelay|and|set|must|fn|attributes|elements|autocomplete|type|replace|moveStart|iPass|You|new|select|extend|500|200|RegExp|alert|off|gi|u25CF|true|tagName|setEndPoint|blur|selectionStart|toLowerCase|selectionEnd|getBookmark|duplicate|moveToBookmark|document|EndToStart|focus|match|collapse|insertAfter|moveEnd|hide|jQuery|createRange'.split('|'),0,{
}
))

CSS代码(demo.css):

@charset "utf-8";body{background:#C3CAD0;font-family:Tahoma,Geneva,sans-serif;font-size:16px;}
.headerBox{color:#F9FAFA;text-align:center;text-shadow:1px 1px 1px #3A4868;}
.loginBox{background:#5C6982;border:solid 4px #65728A;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px 4px 10px rgba(0,0,0,0.2);-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px 4px 10px rgba(0,0,0,0.2);box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px 4px 10px rgba(0,0,0,0.2);margin:auto auto 8px auto;padding:20px;width:340px;}
.loginBox h1{color:#F9FAFA;font-size:20px;font-weight:bold;margin:0 0 12px 0;padding:0px 8px 8px 8px;text-shadow:1px 1px 1px #3A4868;}
.inputBox{background:#FFF;border:solid 2px #FFF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px 2px 4px rgba(0,0,0,0.15);-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px 2px 4px rgba(0,0,0,0.15);box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px 2px 4px rgba(0,0,0,0.15);margin:5px auto 5px auto;padding:8px;width:300px;}
.inputBox label{font-weight:bold;display:inline-block;text-shadow:1px 1px 1px #F3F4F6;}
.inputBox input{background:transparent;border:none;color:#35455F;font-family:Tahoma,Geneva,sans-serif;font-size:16px;outline:none;padding:5px;width:200px;}
button{color:#FFF;cursor:pointer;background:#000;border:solid 2px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px -2px 6px rgba(255,255,255,0.15);-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px -2px 6px rgba(255,255,255,0.15);box-shadow:0px 2px 2px rgba(0,0,0,0.2),inset 0px -2px 6px rgba(255,255,255,0.15);display:block;font-family:Tahoma,Geneva,sans-serif;font-size:16px;font-weight:bold;margin:5px auto 5px auto;padding:8px;position:relative;width:150px;}
button:hover,button:active{background:#101010;border:solid 2px #101010;-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.4),inset 0px -2px 6px rgba(255,255,255,0.15);-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.4),inset 0px -2px 6px rgba(255,255,255,0.15);box-shadow:0px 2px 4px rgba(0,0,0,0.4),inset 0px -2px 6px rgba(255,255,255,0.15);}
button:active{top:1px;}

附件:下载该文件资源,减少时间成本(增值服务)