总共有7个分页，需要做成单页面竖直滚动切换形式（某易公司前端面试作业）一
2014-07-17 19:15
232 查看
需求：
1.总共有7个分页，需要做成单页面竖直滚动切换形式。
2.页面切换需要分两层，切换需要有错层效果。
3.页面上的元素可以考虑做一些进入动画。
4.声音统一用p2-18-1.wav这个文件
5.需要考虑小屏幕居中对齐，确保小屏幕手机在竖屏情况下也能看到主要内容。
只怪自己太懒做作业不认真，只做了个大方向的页面展示框架，没有细化的去完成作业哈哈，被某易BS了，代码太烂，再给我一次机会的话一定可以做的很好：
比较懒直接用git clone了一个html5-boilerplate 下来做框架，
自己写的代码如下：
index.html
main.css CSS文件
main.js JS文件，
实现的效果：
1、网页自适应；
2、当你向下滚动滚动条时，下一页进入屏幕时z-index设为了2，前一页固定在屏幕中单并且透明度opacity由1->0，实现逐渐消失
3、当你向上滚动滚动条时，上一页进入屏幕透明度opacity由0->1，实现逐渐出现，
总体效果就是向下滚屏纸牌一张一张叠上去，向上滚屏就是派纸牌一样
实现原理：
监听滚动条的位置，当滚动到第i+1页开始进入屏幕时：固定前当前第i页(设置position:fixed)，设置第i+1页z-index为2，当然其他的都为1，这样你就可以看到第i+1叠上第一页的效果，同时按比较实时按比例设置第i页的透明度opacity由1->1，这样你就可以看到第i页逐渐消失或者出现的效果。
1.总共有7个分页，需要做成单页面竖直滚动切换形式。
2.页面切换需要分两层，切换需要有错层效果。
3.页面上的元素可以考虑做一些进入动画。
4.声音统一用p2-18-1.wav这个文件
5.需要考虑小屏幕居中对齐，确保小屏幕手机在竖屏情况下也能看到主要内容。
只怪自己太懒做作业不认真，只做了个大方向的页面展示框架，没有细化的去完成作业哈哈，被某易BS了，代码太烂，再给我一次机会的话一定可以做的很好：
比较懒直接用git clone了一个html5-boilerplate 下来做框架，
自己写的代码如下：
index.html
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Place favicon.ico and apple-touch-icon(s) in the root directory --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.8.0.min.js"></script> </head> <body> <!--[if lt IE 8]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Add your site or application content here --> <!--First session---> <div class="container"> <div class="wrapper"> <div class="int-first-screen"> <div class="inner-desc"> <h2 class="title">First Title</h2> <h4 class="description">First Description</h4> </div> </div> </div> <!--Second session---> <div class="wrapper"> <div class="int-second-screen"> <div class="inner-desc"> <h2 class="title">Second Title</h2> <h4 class="description">Second Description</h4> </div> </div> </div> <!--Third session---> <div class="wrapper"> <div class="int-third-screen"> <div class="inner-desc"> <h2 class="title">Third Title</h2> <h4 class="description">Third Description</h4> </div> </div> </div> <!--Fourth session---> <div class="wrapper"> <div class="int-fourth-screen"> <div class="inner-desc"> <h2 class="title">Fourth Title</h2> <h4 class="description">Fourth Description</h4> </div> </div> </div> <!--Fifth session---> <div class="wrapper"> <div class="int-fifth-screen"> <div class="inner-desc"> <h2 class="title">Fifth Title</h2> <h4 class="description">Fifth Description</h4> </div> </div> </div> <!--Sixth session---> <div class="wrapper"> <div class="int-sixth-screen"> <div class="inner-desc"> <h2 class="title">Sixth Title</h2> <h4 class="description">Sixth Description</h4> </div> </div> </div> <!--Seventh session---> <div class="wrapper"> <div class="int-seventh-screen"> <div class="inner-desc"> <h2 class="title">Seventh Title</h2> <h4 class="description">Seventh Description</h4> </div> </div> </div> </div> <audio src="p2-18-1.wav" autoplay="autoplay"> Your browser does not support the audio element. </audio> <script src="js/vendor/jquery-1.11.1.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> </body> </html>
main.css CSS文件
/* ==========================================================================
Author's custom styles
========================================================================== */
body
{
background-color:black;
}
.container
{
margin:0px auto;
width:640px;
}
.wrapper
{
width:640px;
height:1136px;
}
.int-first-screen, .int-second-screen, .int-third-screen, .int-fourth-screen, .int-fifth-screen, .int-sixth-screen, .int-seventh-screen
{
background-color: #07080B;
width:640px;
height:1136px;
background:url(../img/top_banner.jpg) no-repeat;
background-size:contain;
z-index:1;
}
.inner-desc
{
width:300px;
margin:0px auto;
padding-top:300px;
border-bottom:1px solid grey;
}
.title
{
font-size:36px;
color:white;
}
.description
{
font-size:24px;
color:#b3d4fc;
}main.js JS文件，
(function () {
/*add your js code here*/
//var initialization
var p_i_w = 640;//default page width
var p_i_h = 1136;//default page height
var p_n = 7;//default page number
var sd_f = true;
var p_w = p_i_w;
var p_h = p_i_h;
//Mobile detection object
var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
},
any: function () {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
//UI initialization here
$(document).ready(function () {
if ($(window).width() >= p_i_w && !isMobile.any()) {
//do nothing
}
else
{
var scale=gbs(p_i_w);
init(scale);
p_w = $(window).width();
p_h = p_h * scale;
}
});
//Add the browser resizing listener
$(window).resize(function () {
if ($(window).width() < p_i_w) {
var scale = gbs(p_w);
init(scale);
p_w = $(window).width();
p_h = p_h * scale;
}
else {
init(p_i_w / p_w);
p_w = p_i_w;
p_h = p_i_h;
}
});
//Add the scroll bar listener
$(window).scroll(function () {
var p_Y = $(window).scrollTop();
var b_h = $(window).height();
if (p_h >= b_h) {
if (p_Y < (p_h - b_h)) {
ors($(".container").children().eq(0).children());
}
else if (p_Y > (p_n - 1) * p_h) {
ors($(".container").children().eq(p_n - 1).children());
}
else {
for (i = 0; i < p_n; i++) {
if ((i + 1) * p_h > p_Y && ((i + 1) * p_h - p_Y) < b_h) {
var ts = ((i + 1) * p_h - p_Y) / b_h;
ofo($(".container").children().eq(i).children(), ts);
ofi($(".container").children().eq(i + 1).children(), ts);
break;
}
else if ((i + 1) * p_h - (p_h - b_h) == p_Y || (i + 1) * p_h == p_Y) {
ors($(".container").children().eq(i).children());
break;
}
/*else if ((i + 1) * p_h > p_Y && ((i + 1) * p_h - p_Y) > b_h)
{
ors($(".container").children().eq(i).children());
break;
}*/
}
}
}
else {
for (i = 0; i < p_n-2; i++) {
if ((i + 1) * p_h > p_Y)
{
var ts = ((i + 1) * p_h - p_Y) / p_h;
ofos($(".container").children().eq(i).children(), ts);
ofi($(".container").children().eq(i + 1).children(), ts);
break;
}
}
}
});
/* ==========================================================================
Add the custom function here
========================================================================== */
function gbs(p_w)//get the scale of browser width / page width
{
return $(window).width() / p_w;
}
function init(scale)//initialization
{
sobs($(".container"), scale, true, false, false);
sobs($(".container").children().children(), scale, true, true, false);
sobs($(".container").children(), scale, true, true, false);
ors($(".container").children().children());
sobs($(".inner-desc"), scale, false, false, true);
$(document).scrollTop(0);
}
function sobs($obj, scale,w,h,pt)// set the obj css style by scale
{
if(w)
{
$obj.css("width", $obj.width() * scale + "px");
}
if(h)
{
$obj.css("height", $obj.height() * scale + "px");
}
if(pt)
{
$obj.css("padding-top", ($obj.css("padding-top").replace("px","")) * scale + "px");
}
}
function ofi($obj, ts) {//Add fade-in effect to a obj
$obj.css({ "position": "relative", "z-index": 2, "left": "0px", "top": "0px" });
}
function ofo($obj, ts) {//Add fade-out effect to a obj ,ts is the transparency scale
$obj.css({ "position": "fixed", "left": ($(window).width() - p_w) / 2 + "px", "top": $(window).height() - p_h, "opacity": ts, "z-index": 1 });
}
function ors($obj) {//reset the css style for the obj
$obj.css({ "position": "relative", "left": "0px", "top": "0px", "opacity": "1","z-index": 1 });
}
function ofos($obj, ts) {//Add special fade-out effect to a obj ,ts is the transparency scale
$obj.css({ "position": "fixed", "left": ($(window).width() - p_w) / 2 + "px", "top": "0px", "opacity": ts, "z-index": 1 });
}
})();实现的效果：
1、网页自适应；
2、当你向下滚动滚动条时，下一页进入屏幕时z-index设为了2，前一页固定在屏幕中单并且透明度opacity由1->0，实现逐渐消失
3、当你向上滚动滚动条时，上一页进入屏幕透明度opacity由0->1，实现逐渐出现，
总体效果就是向下滚屏纸牌一张一张叠上去，向上滚屏就是派纸牌一样
实现原理：
监听滚动条的位置，当滚动到第i+1页开始进入屏幕时：固定前当前第i页(设置position:fixed)，设置第i+1页z-index为2，当然其他的都为1，这样你就可以看到第i+1叠上第一页的效果，同时按比较实时按比例设置第i页的透明度opacity由1->1，这样你就可以看到第i页逐渐消失或者出现的效果。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现页面滚动到最下方自动按分页的形式加载内容效果
- 百度前端笔试面试7个试题
- web前端开发工程师需要注意的一点：页面无端多次刷新
- 分享一款页面视差滚动切换jquery.localscroll插件
- IT软件外包行业深入分析：现状、前途、趋势、待遇 什么是软件外包 外包公司是怎么工作的 软件外包公司的面试 软件外包公司需要什么样的人
- 基于html5和css3响应式全屏滚动页面切换效果
- 如果一个页面中用了两个以上displaytag，需要注意的分页问题
- 公司前端页面制作小心得
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
- 面试 需要注意三种公司
- Web前端开发最佳实践（13）：前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码
- IT公司面试时需要注意的几个题目(最近面试几个IT公司的感受)
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- 前端内容滚动切换插件jCarouse
- 数据库中是以int形式存储,页面需要显示其对应信息的方法(例如性别,状态)
- 当页面类似于表单，有很多需要输入的内容，就需要做上下滚动的效果
- Silverlight外包公司--分享浅析在Silverlight中实现“页面”切换
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- 分享一款页面视差滚动切换jquery.localscroll插件
- 基于html5整屏切换IDO智能手表页面滚动代码