[代码样式]onepage-scroll制作iPhone 5s页面

简介

之前介绍了 jQuery单页/全屏滚动插件onepage-scroll，为了更好的了解该插件，作为练习，今天就用它来制作苹果 iPhone 5s 页面。除了使用 onepage-scroll，我们还使用了以下两个文件：

ResizeEnd – 用于响应式设计，让浏览器窗口大小改变后使用不同的图片。当然你也可以使用 CSS3 media 媒体查询来设计响应式，这里使用 JavaScript 来处理是为了能兼容一些 IE 低版本浏览器。
Modernizr – 用于检测浏览器特性，还是为了兼容 IE 低版本浏览器。

浏览器兼容

虽然做了一些浏览器兼容处理，但由于 onepage-scroll 插件本身的原因，不能做到全兼容，IE 各低版本有的可能仍无法浏览，有的效果有差异，如果把能正常浏览也当成兼容，那么本例的兼容情况如下：


IE8+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

制作方法

1、页面加载

由于本例内涵数张 iPhone 5s 高清图片，官方的大小最大高达 3.6M，这里压缩后大约为原大小的 40%- 60%，但仍旧不小，所以在页面加载完成前加上一个 loading 效果是很有必要的。

1.1、HTML

<body class="loading">
    <div class="main" id="main">
    </div>
</div>

1.2、CSS

.loading {
    background: url(images/ico_loading.gif) 50% no-repeat;
}
.loading .main {
    opacity: 0;
}
.main {
    -webkit-transition:opacity .6s;
    -moz-transition:opacity .6s;
    -o-transition:opacity .6s;
    transition: opacity .6s;
}

1.3、JavaScript

$(window).load(function(){
    window.setTimeout(function(){
        $('body').removeClass('loading');
    }, 2000);
});

2、主体结构

HTML 的主题结构比较简单，列出部分，如下：

<div class="main" id="main">
    <div class="page page1">
        <div class="mainNav f-cb">
            <ul>
                <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow" >Apple</a></li>
                <li><a href="https://www.dowebok.com/118.html" rel="external nofollow" >在线商店</a></li>
                <li><a href="https://www.dowebok.com/javascript:" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Mac</a></li>
            </ul>
        </div>
        <div class="subNav f-cb">
            <h2>iPhone 5S</h2>
            <ul>
                <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow" >功能</a></li>
                <li><a href="https://www.dowebok.com/javascript:" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >设计</a></li>
                <li><a href="https://www.dowebok.com/javascript:" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >内置 App</a></li>
            </ul>
        </div>
        <div class="txt">
            <h2>iPhone 5s。你比你想象的更强大。</h2>
            <p>你拥有一种力量，来开创，来塑造，来分享自己的生活。这种力量可让你将日常之事处理得非同凡响，并让非同凡响成为日常之事。有了 iPhone 5s，你比你想象的更强大。</p>
        </div>
        <img class="responsiveImg" date-small="images/img1-s.png" date-big="https://www.dowebok.com/images/img1-b.png" src="https://www.dowebok.com/images/img1-b.png" alt="iPhone 5s。你比你想象的更强大。">
    </div>
    <div class="page page2">
        <div class="txt">
            <h2></h2>
            <p>iPhone 5s 敢于构想，缜于思量，更精于工艺。它创造了技术上的可能，更<span>缔造了技术为人所用的典范</span>。它不仅是顺理成章的下一代，更<span>是本该如此的新一代。</span></p>
        </div>
        <img class="responsiveImg" date-small="images/img2-s.png" date-big="https://www.dowebok.com/images/img2-b.png" src="https://www.dowebok.com/images/img2-b.png" alt="iPhone 5s">
    </div>
</div>

img 标签上加了两个属性 date-small 和 date-big，明白人一看就知道就是大小图片的路径。当窗口大小改变的时候，ResizeEnd 会选择相应的图片显示。

3、引入文件

把以下文件加入到 body 结束之前。

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.onepage-scroll.min.js"></script>
<script src="https://www.dowebok.com/js/jQuery.resizeEnd.min.js"></script>
<script src="https://www.dowebok.com/js/modernizr.custom.07427.js"></script>

4、JavaScript

以下是完整的 JavaScript 代码。

$(function(){
    var $window = $(window);
    var $wh = $window.height();
    var $body = $('body');
    var $main = $('.main');
    var $responsiveImg = $('.responsiveImg');
    var $responsiveFallback = false;
    //页面加载时判断是否需要更换图片
    if($wh < 790){
        responsiveFn1();
    }
    //浏览器检测，判断是否为高级浏览器
    if(Modernizr.cssanimations){
        $responsiveFallback = false;
    } else {
        $responsiveFallback = true;
    }
    //onepage_scroll方法
    $main.onepage_scroll({
        sectionContainer: '.page',
        responsiveFallback: $responsiveFallback
    });
    //窗口改变大小切换不同的图片
    $window.resizeEnd({
        delay : 500
    }, function(){
        var $wh = $window.height();
        if($wh < 790){
            responsiveFn1();
        } else {
            responsiveFn2();
        }
    });
    function responsiveFn1(){
        $body.addClass('responsive-height-lt790')
        $responsiveImg.each(function(){
            var $dateSmall = $(this).attr('date-small');
            $(this).attr('src', $dateSmall);
        });
    }
    function responsiveFn2(){
        $body.removeClass('responsive-height-lt790')
        $responsiveImg.each(function(){
            var $dateBig = $(this).attr('date-big');
            $(this).attr('src', $dateBig);
        });
    }
});
//页面加载时的 Loading 效果
$(window).load(function(){
    window.setTimeout(function(){
        $('body').removeClass('loading');
    }, 2000);
});

[b2_file link="

百度网盘" name="onepage-scroll制作iPhone 5s页面" pass="" code=""]