jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
更新时间：2015年04月12日 17:08:02 投稿：hebedich
本文给大家分享的是一款jQuery整屏（全屏）滚动插件网页特效，滚动鼠标滚轮整屏一屏滚动切换代码，可设置文字/图片绝对上下左右居中显示JS代码，时下最流行的jQuery全屏滚动插件！（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）
经常看到在一些产品介绍页，看到全屏滚动的特效，今天推荐款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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
本篇文章主要是对防止jQuery ajax Load使用缓存的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本文为大家介绍下jquery对ajax的支持性，感兴趣的朋友可以了解下2013-12-12
jQuery实现form表单序列化转换为json对象功能示例
这篇文章主要介绍了jQuery实现form表单序列化转换为json对象功能,结合实例形式分析了表单数据传输中使用serializeJson进行序列化操作相关实现技巧,需要的朋友可以参考下2018-05-05
浏览网页时不小心会碰到这样的一个网站有幻灯片而且每个数字上面都带有进度条闲的无聊,自己用jquery实现了一个,因为有一个进度条的播放过程暂不支持ie6，热爱特效的你可不要错过了哈2013-02-02
这篇文章主要介绍了jquery实现简单的二级导航下拉菜单效果,涉及jquery鼠标事件动态操作页面元素样式及Ajax调用的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局，用法及示例如下，感兴趣的朋友不要错过2014-09-09
jQuery中的replace字符串替换实现不同尺寸图片切换功能
这篇文章主要介绍了jQuery之replace字符串替换实现不同尺寸图片切换,使用jQuery的replace()方法可以很方便地实现不同尺寸图片的切换，需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了jQuery+PHP实现上传裁剪图片，以及图片的预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了jQuery实现底部浮动窗口效果,涉及jQuery事件响应及页面元素动态变换的相关操作技巧,需要的朋友可以参考下2016-09-09
滑动菜单项效果,听起来就是很时尚的一个效果，不过实现起来有些麻烦，还好有本文的出现，可以帮助你解决这个困惑，热爱特效的你可不要错过了哈，好了话不多说切入正文2013-02-02
最新评论