jQuery手机端注册登录页面代码

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

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

以下是 jQuery手机端注册登录页面代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery手机端注册登录页面代码</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css">

<body>
<div data-role="page" >
    <div data-role="content" class="login-wrap">
        <div class="login-input-box">
            <div class="logo">
                <p>个人日记</p>
            </div>
            <div class="line1">
                <img src="images/user.png">
                <input type="text" class="user" value="用户名" onfocus="if(value=='用户名') {value=''}" onblur="if (value=='') {value='用户名'}" data-role="none">
            </div>
            <div class="line2">
                <img src="images/lock.png">
                <input type="text" class="lock" value="密码" onfocus="if(value=='密码') {value=''}" onblur="if (value=='') {value='密码'}" data-role="none">
            </div>
            <div class="chose">
                <a href="register.html" data-ajax="false" class="register" data-role="none" data-transition="slide">注册</a>
                <a href="forget.html"data-ajax="false"  class="forgive" data-role="none">忘记密码</a>
                <a class="login" href="index.html"data-ajax="false" data-role="none" data-transition="slide">登陆</a>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--<link rel="stylesheet" type="text/css" href="css/theme.css">-->

<body>
<div data-role="page" data-theme="f">
    <div data-role="header" data-theme="f">
        <a href="login.html" data-ajax="false" class="back" data-role="none" data-direction="reverse"><img src="images/back.png"></a>
        <h1 data-theme="f"></h1>
    </div>
</div>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</html>

JS代码(main.js):

/** * Created by zhang-ting on 2015/10/12. */
// ����button $(function (){
	$('.a-file').click(function(){
	$('.hidden').click();
}
);
}
);
	// ͼƬ�ϴ�Ԥ�� IE�������˾��� function previewImage(file){
	var MAXWIDTH = 120;
	var MAXHEIGHT = 120;
	var div = document.getElementById('preview');
	if (file.files && file.files[0]){
	div.innerHTML ='<img id=imghead>';
	var img = document.getElementById('imghead');
	img.onload = function(){
	var rect = clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
	img.style.marginTop = rect.top+'px';
	img.width = rect.width;
	img.height = rect.height;
}
var reader = new FileReader();
	reader.onload = function(evt){
	img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
else //����IE{
	var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
	file.select();
	var src = document.selection.createRange().text;
	div.innerHTML = '<img id=imghead>';
	var img = document.getElementById('imghead');
	img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
	var rect = clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
	status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
	div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;
	height:"+rect.height+"px;
	margin-top:"+rect.top+"px;
	"+sFilter+src+"\"'></div>";
}
}
function clacImgZoomParam( maxWidth,maxHeight,width,height ){
	var param ={
	top:0,left:0,width:width,height:height}
;
	if( width>maxWidth || height>maxHeight ){
	rateWidth = width / maxWidth;
	rateHeight = height / maxHeight;
	if( rateWidth > rateHeight ){
	param.width = maxWidth;
	param.height = Math.round(height / rateWidth);
}
else{
	param.width = Math.round(width / rateHeight);
	param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
	param.top = Math.round((maxHeight - param.height) / 2);
	return param;
}

CSS代码(style.css):

/*---------------enter----------------*/
a,ul,li{margin:0;padding:0;text-decoration:none;list-style:none;}
.enter-intro{width:100%;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.enter-intro .intro-logo{overflow:hidden;text-align:center;}
.enter-intro .intro-cen{width:50%;margin-left:auto;margin-right:auto;overflow:hidden;margin-top:20px;text-align:center;padding-bottom:40px;}
.enter-intro .intro-cen p{color:#4d4d4d;margin-top:10px;}
.enter a{position:fixed;color:#737373;bottom:20px;left:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);transform:translate(-50%,0);}
/*---------------login----------------*/
.login-input-box{width:80%;margin:auto;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.logo p{font-size:2.2rem;text-align:center;}
.user,.lock,.mail{float:left;width:85%;height:35px;border:none;padding-left:3%;line-height:2.4rem;font-size:1.2rem;outline:none;color:#4d4d4d;background:none;}
.line1,.line2,.line3{width:98%;overflow:hidden;border-bottom:1px solid #aaa;padding-left:2%;margin-top:40px;}
.login-wrap .line1{margin-top:80px;}
.line1 img,.line2 img,.line3 img{float:left;padding-top:2px;}
.register,.forgive{margin-top:20px;color:#4d4d4d !important;font-weight:normal;padding:0px 2%;}
.register{float:left;}
.forgive{float:right;}
.chose .login{float:left;margin:40px 0;width:100%;font-size:1.2rem;line-height:2.6rem;text-align:center;color:#4d4d4d!important;background:#e5e5e5;border-radius:20px;}
/*---------------register----------------*/
.head-img{position:relative;margin-top:60px;text-align:center;}
.head-img img{width:120px;height:120px;border-radius:50%;}
.head-img img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;}
.head-img a{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:2.5rem;font-weight:normal;color:#4d4d4d;}
.hidden{display:none;}
/*---------------reg-tip----------------*/
.tip{padding-top:100px;width:80%;margin:auto;text-align:center;}
.tip p{font-size:1.3rem;margin-bottom:50px;}
/*---------------index----------------*/
.ch-write{width:80%;margin:auto;font-family:"Times New Roman";color:#4d4d4d;font-weight:normal;}

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