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

2019-11-20 12:43:01

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：jQuery插件pagination实现分页特效

下一篇：jQuery插件slicebox实现3D动画图片轮播切换特效