jQuery插件multiScroll實作全螢幕滑鼠滾動切換頁面特效_jquery

經常看到在一些產品介紹頁，看到全螢幕滾動的特效，今天推薦款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   腳本下載

以上所述就是本文的全部內容了，希望大家能夠喜歡。