DIV CSS 佈局教程網

 經常看到在一些產品介紹頁，看到全屏滾動的特效，今天推薦款jQuery插件給大家，jQuery全屏鼠標滾動切換頁面特效插件multiScroll.js，支持眾多的參數自定義配置，scrollingSpeed：切換速度、easing：動畫效果、navigation：false是否出現導航，還支持事件Callback函數調用，onLeave、afterLoad等，效果還是和不錯的，浏覽器兼容方面：IE8, 9, Opera 12、以及現代的浏覽器，需要浏覽器支持CSS3屬性，推薦學習和使用。

使用方法：

1.加載插件和jQuery

1 2 3 4 <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內容

1 2 3 4 5 6 7 8 9 10 11 12 <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.函數調用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <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>