jQuery全屏鼠标滚动切换页面特效插件multiScroll.js
经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll js,支持众多的参数自定义配置,scrollingSpeed:切换速度、easing:动画效果、na
经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度、easing:动画效果、navigation:false是否出现导航,还支持事件Callback函数调用,onLeave、afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12、以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用。
使用方法:
1.加载插件和jQuery
2.HTML内容
- <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>
3.函数调用
- <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>
- <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>
相关内容
这些是最新的
热门关键词
pagination(1) Elastislide(1) 服务器配置(1) 返回顶部代码(4) Illustrator破解版(1) 大陆(1) 特效插件(3) 强制不换行(1) 滚动代码(1) 鼠标跟随(1) (2) 右侧(1) IE6(1) Retina(1) linux服务器(1) mysql(1) 购物网站(1) 3D功能(1) 网页(1) 返回顶部(4) 服务器(1) 网页设计教程(1) 百度直达号出炉后微信会慌吗?(1) 布局(2) 网页按钮(1) 滚动效果(1) win7(5) slicebox(1) Bootstrap(1) 教程(1)热门排行
- 输入框提示文字跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder)
- jQuery刮刮卡特效插件jQuery.eraser
- 非常优秀响应式jQuery焦点图插件bxSlider
- 分享12个非常好的免费矢量资源网站
- 效果最好的焦点图幻灯片jQuery插件Skippr
- 基于Bootstrap改造的国产前端框架 H-ui
- 支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide
- 实用jQuery分页特效插件jquery.pagination.js
- jQuery全屏鼠标滚动切换页面特效插件multiScroll.js
- 手机网站WebApp页面布局JS UI 框架App.js