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

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

简介

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

制作方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/jquery.multiscroll.css">
<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/,大家可以对比一下,当然了,我并没有做的它那么完整。

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]全屏/整屏滚动组件fullPage

2020-9-10 17:14:55

脚本代码

[代码样式]让IE7 IE8支持CSS3 background-size属性

2020-9-10 17:14:57

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索