經常看到在一些產品介紹頁，看到全屏滾動的特效，今天推薦款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> 以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
