jQuery中multiScroll插件实现全屏鼠标滚动切换页面特效
- 更新时间:2019-08-01 21:38:09
- 编辑:宋乐志
经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款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的ajax和遍历数组json实例代码
下面小编就为大家带来一篇jQuery的ajax和遍历数组json实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2019-07-24
-
jQuery之字体大小的设置方法
本篇文章主要是对jQuery 字体大小的设置方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
发布时间:2019-08-28
-
Bootstrap与jQuery UI框架设计
随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相
大小:180 MBjQuery电子书
-
jQuery实战从入门到精通
本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书
大小:189.1 MBjQuery电子书
-
jQuery实战
jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外
大小:99.0 MBjQuery电子书