快捷導(dǎo)航

jQuery插件multiScroll實(shí)現(xiàn)全屏鼠標(biāo)滾動(dòng)切換頁(yè)面特效

更新時(shí)間：2015年04月12日 17:08:02 投稿：hebedich

本文給大家分享的是一款jQuery整屏（全屏）滾動(dòng)插件網(wǎng)頁(yè)特效，滾動(dòng)鼠標(biāo)滾輪整屏一屏滾動(dòng)切換代碼，可設(shè)置文字/圖片絕對(duì)上下左右居中顯示JS代碼，時(shí)下最流行的jQuery全屏滾動(dòng)插件！（兼容測(cè)試：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流瀏覽器）

經(jīng)?？吹皆谝恍┊a(chǎn)品介紹頁(yè)，看到全屏滾動(dòng)的特效，今天推薦款jQuery插件給大家，jQuery全屏鼠標(biāo)滾動(dòng)切換頁(yè)面特效插件multiScroll.js，支持眾多的參數(shù)自定義配置，scrollingSpeed：切換速度、easing：動(dòng)畫效果、navigation：false是否出現(xiàn)導(dǎo)航，還支持事件Callback函數(shù)調(diào)用，onLeave、afterLoad等，效果還是和不錯(cuò)的，瀏覽器兼容方面：IE8, 9, Opera 12、以及現(xiàn)代的瀏覽器，需要瀏覽器支持CSS3屬性，推薦學(xué)習(xí)和使用。

使用方法：

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內(nèi)容

<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.函數(shù)調(diào)用

<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 腳本下載

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: