multiscroll.js制作斯柯达野帝页面

分类:代码 日期:

multiscroll.js制作斯柯达野帝页面

演 示 下 载

简介

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

制作方法

1、引入文件

<link rel="stylesheet" href="css/jquery.multiscroll.css">

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="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/,大家可以对比一下,当然了,我并没有做的它那么完整。

查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈