[代码样式]multiscroll.js制作斯柯达野帝页面

简介

之前介绍过 jQuery 滚动插件 multiscroll.js，但都是基本演示，没有一个比较完成的例子，今天就来制作一个——波兰斯柯达野帝页面。其实比起基本演示，也就多添加了一些图片、文字、动画而已，并不复杂。其中，动画效果是使用 CSS3 制作的，所以不兼容低版本 IE，有需要的请自行更改成 JS 动画。

制作方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/jquery.multiscroll.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery-1.8.3.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.easing.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.multiscroll.min.js"></script>

2、HTML

HTML 代码较长，这里只列出前两屏幕。

<div class="dowebok-Wrap">
    <div class="ms-left">
        <div class="ms-section ms-section1">
            <div class="txt">
                <h1><strong>斯柯达 <span>野帝</span></strong></h1>
                <p class="green-box">让自己忘乎所以！</p>
            </div>
        </div>
        <div class="ms-section ms-section2">
            <div class="txt2">
                <h2>Yeti</h2>
                <p>意气风发每一天</p>
            </div>
        </div>
        ...
    </div>
    <div class="ms-right">
        <div class="ms-section ms-section1"></div>
        <div class="ms-section ms-section2">
            <div class="txt2">
                <h2>Yeti outdoor</h2>
                <p>抢你的地方远未知</p>
            </div>
        </div>
        ...
    </div>
</div>

3、CSS

CSS 也很简单，大部分是给每屏添加背景，以及添加动画，这里也仅贴出部分代码，完整的代码请查看演示或下载源文件查看。

...
.ms-left .ms-section1 { background-image: url(images/l1.jpg);}
.ms-left .ms-section2 { background-image: url(images/l2.jpg);}
...
.ms-right .ms-section1 { background-image: url(images/r1.jpg);}
.ms-right .ms-section2 { background-image: url(images/r2.jpg);}
...
.ms-section1 .txt { position: relative; left: -100%; top: 15%; opacity: 0; transition-duration: 0.5s;}
.ms-section .txt2 { position: relative; top: 20%; padding: 0 15%;}
...
/* 动画效果 */
.active .txt { left: 20%; opacity: 1; transition-delay: 1s;}
.active .txt2 { left: 0; transition-delay: 1s;}

3、JavaScript

JavaScript 部分也是非常简单的，multiscroll.js 的配置几乎是最基本的，只设置了内容是否处置居中（verticalCentered: false）。另外再添加了一点小动作。

$(function(){
    $('#dowebok-Wrap').multiscroll({
        verticalCentered: false
    });
    var $btn3l = $('.btn3l');
    $btn3l.on('click', function(){
        $('.ms-right').find('.ms-section3').toggleClass('turnOn');
        var $thisTxt = $(this).html();
        if($thisTxt == '开灯'){
            $(this).html('关灯');
        } else {
            $(this).html('开灯');
        }
        return false;
    });
    $('.btn42').on('click', function(){
        $('.ms-left').find('.ms-section4').toggleClass('down');
        var $thisTxt = $(this).html();
        if($thisTxt == '放倒座位'){
            $(this).html('竖起座位');
        } else {
            $(this).html('放倒座位');
        }
        return false;
    });
});

最后附上波兰斯柯达野帝官方地址：//www.skodayeti.pl/，大家可以对比一下，当然了，我并没有做的它那么完整。