需求：
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页逐渐消失或者出现的效果。