jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

经常看到在一些产品介绍页，看到全屏滚动的特效，今天推荐款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>

查看DEMO   脚本下载

以上所述就是本文的全部内容了，希望大家能够喜欢。