jQuery+multiscroll鼠标滚动全屏图

收藏

本文将演示波兰斯柯达野帝页面的全屏图效果。具体鼠标滚动效果请到演示页面查看。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示 下载资源： 106 次

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<div class="ms-section ms-section3">
    <div class="txt2">
        <h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
        <h3>SUV的惊心动魄的一天晚上</h3>
        <p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
        <a class="button btn3l" href="javascript:">开灯</a>
    </div>
</div>
<div class="ms-section ms-section4">
</div>
<div class="ms-section ms-section5">
    <div class="txt2">
        <h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
        <h3>SUV的惊心动魄的一天晚上</h3>
        <p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
        <a class="button" href="javascript:">一个按钮</a>
    </div>
</div>

引入jQuery库、动画和multiscroll插件

<script src="js/jquery.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.multiscroll.min.js"></script>

$('#erdangjiade-Wrap').multiscroll({
     verticalCentered: false
});

页面加载时的 Loading 效果

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