响应式网页《一起惠返利网》项目要点

1.这是继《蚂蚁天使》网页后的第二个分组合作项目，分组合作，其中我参与了登录，淘宝，新闻评论页面的制作。

其间有许多效果，也用到了一些js的插件，首先是写响应式必须写的一句代码：

<meta name="viewport" content="width=device-width; initial-scale=1.0">

应用了两个js插件：

A:<script src="js/jquery-1.8.3.min.js"></script>

B:<script src="layer/layer.js"></script>

一：先来说一说登录，注册里面密码框输入密码的显示与隐藏的效果：

1.现在HTML代码里边写一个关于隐藏显示的开关按钮：

<b class="tp-btn btn-off"></b>     //现在的开关还属于关闭隐藏密码状态

2.css的代码：

.tp-btn {
cursor: pointer;
display: block;
height: 35px;
position: absolute;
right: 10px;
top:8px;
margin-top:0.5rem ;
width: 51px;
z-index: 1;
}

 .btn-off {
background: url("../images/u_s1.png") no-repeat scroll 0 0 / 51px 35px;  //隐藏密码的开关的图片

}

.btn-on {
background: url("../images/u_s2.png") no-repeat scroll 0 0 / 51px 35px;  //显示密码的开关的图片
}

 

3.关于js的部分：

//显隐密码切换
function displayPwd(){
$(".tp-btn").toggle(
function(){
$(this).addClass("btn-on");
var textInput = $(this).siblings(".plaintext");
var pwdInput = $(this).siblings(".ciphertext");
pwdInput.hide();
textInput.val(pwdInput.val()).show().focusEnd();
},
function(){
$(this).removeClass("btn-on");
var textInput = $(this).siblings(".plaintext ");
var pwdInput = $(this).siblings(".ciphertext");
textInput.hide();
pwdInput.val(textInput.val()).show().focusEnd();;
}
);
}

 

二：其次再来说一说该项目的每个网页都有的页面加载效果的相关代码：

1.首先在HTML代码里边写出页面加载效果的HTML代码：

 

<div id="preloader">
<div id="status">
<p class="center-text"><span>拼命加载中···</span></p>
</div>
</div>

 

2：css重叠样式代码情况：

 

/*页面加载*/
#preloader {position:fixed;z-index:2500;top:0;left:0;right:0;bottom:0;background-color:#fff; z-index:999999; }
#status {
z-index:999999;
width:250px;
height:250px;
position:absolute;
left:50%;
top:50%;
background-size:32px 32px;
margin-top: -125px;
margin-right: 0;
margin-bottom: 0;
margin-left: -115px;
}
#status p{top:70%;}
.center-text{
text-align:center;
background-image: url(../images/loading.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 182px;
width: 234px;
}
.center-text span {
font-size: 14px;
color: #999999;
position: relative;
top: 170px;
}

 

3.js代码：

先在头部引用<script src="js/jquery-1.8.3.min.js"></script>；

然后当页面在加载时：

<script>
$(window).load(function() {
$("#status").fadeOut();
$("#preloader").delay(350).fadeOut("slow");
})
</script>

 

以上几点是我在做项目过程中的几个使用且简便的网页操作的代码编写。