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


Posted in Javascript onApril 12, 2015

经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度、easing:动画效果、navigation:false是否出现导航,还支持事件Callback函数调用,onLeave、afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12、以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用。

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

使用方法:

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>

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

Javascript 相关文章推荐
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 #Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 #Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 #Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 #Javascript
jQuery实现简单二级下拉菜单
Apr 12 #Javascript
纯JS实现旋转图片3D展示效果
Apr 12 #Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 #Javascript
You might like
PHP将XML转数组过程详解
2013/11/13 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
js实现楼层导航功能
2017/02/23 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python中获取对象信息的方法
2015/04/27 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
pytorch 常用线性函数详解
2020/01/15 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
在校硕士自我鉴定
2014/01/23 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
公司请假条范文
2014/04/11 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
广播体操比赛主持词
2015/06/29 职场文书
结婚十年感言
2015/07/31 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python