当前位置：主页 > 资源 > 效果代码 >

jQuery全屏鼠标滚动切换页面特效插件multiScroll.js
栏目分类：效果代码发布日期：2015-09-02 浏览次数：次

经常看到在一些产品介绍页，看到全屏滚动的特效，今天推荐款jQuery插件给大家，jQuery全屏鼠标滚动切换页面特效插件multiScroll js，支持众多的参数自定义配置，scrollingSpeed：切换速度、easing：动画效果、na

经常看到在一些产品介绍页，看到全屏滚动的特效，今天推荐款jQuery插件给大家，jQuery全屏鼠标滚动切换页面特效插件multiScroll.js，支持众多的参数自定义配置，scrollingSpeed：切换速度、easing：动画效果、navigation：false是否出现导航，还支持事件Callback函数调用，onLeave、afterLoad等，效果还是和不错的，浏览器兼容方面：IE8, 9, Opera 12、以及现代的浏览器，需要浏览器支持CSS3属性，推荐学习和使用。

使用方法：

1.加载插件和jQuery

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

<script src="libs/jquery/1.9.1/jquery.min.js"></script>

<script src="vendors/jquery.easings.min.js"></script>

<script type="text/javascript" src="jquery.multiscroll.js"></script>

2.HTML内容

<div id="multiscroll">

    <div class="ms-left">

        <div class="ms-section">Some section</div>

        <div class="ms-section">Some section</div>

        <div class="ms-section">Some section</div>

    </div>

    <div class="ms-right">

        <div class="ms-section">Some section</div>

        <div class="ms-section">Some section</div>

        <div class="ms-section">Some section</div>

    </div>

</div>

3.函数调用

<script type="text/javascript">

$(document).ready(function() {

    $('#multiscroll').multiscroll{

        verticalCentered : true,

        scrollingSpeed: 700,

        easing: 'easeInQuart',

        menu: false,

        sectionsColor: [],

        navigation: false,

        navigationPosition: 'right',

        navigationColor: '#000',

        navigationTooltips: [],

        loopBottom: false,

        loopTop: false,

        css3: false,

        paddingTop: 0,

        paddingBottom: 0,

        normalScrollElements: null,

        keyboardScrolling: true,

        touchSensitivity: 5,

        //events

        onLeave: function(index, nextIndex, direction){},

        afterLoad: function(anchorLink, index){},

        afterRender: function(){},

        afterResize: function(){},

    });

});

</sript>