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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
js处理表格对table进行修饰
May 26 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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学习笔记之基础知识
2014/11/08 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javascript 禁止复制网页
2009/06/11 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
jQuery封装animate.css的实例
2018/01/04 jQuery
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
numpy下的flatten()函数用法详解
2019/05/27 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
python求解汉诺塔游戏
2020/07/09 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
会话Bean的种类
2013/11/07 面试题
初中家长寄语
2014/04/02 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2015教师年度考核评语
2015/03/25 职场文书
会议主持词结束语
2015/07/03 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python