jQuery+multiscroll鼠标滚动全屏图

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

分类：图片代码 > 图片轮播难易：中级

查看演示下载资源下载积分： 20 积分

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>

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

页面加载时的 Loading 效果

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