您的位置：首页 > Web前端 > JQuery

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

2015-04-12 17:08 1196 查看

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

相关文章推荐

新的分享

章节导航