jQuery中multiScroll插件实现全屏鼠标滚动切换页面特效
- 发布时间：
- 作者：码农之家
- 点击：211
这篇文章主要知识点是关于jquery全屏滚动插件、jQuery、multiscroll、jquery全屏插件、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
jQuery multiScroll插件实现全屏鼠标滚动切换页面特效方法
经常看到在一些产品介绍页，看到全屏滚动的特效，今天推荐款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 脚本下载
以上所述就是本文的全部内容了，希望大家能够喜欢。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
相关电子书
学习笔记
<
1
>
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
先给大家展示效果图如下所示： 使用方法： 首先在head区引入jquery.js，jquery-ui.js，fullPage.js以及样式文件jquery.fullPage.css link rel="stylesheet" href="css/jquery.fullPage.css"script src="js/jquery.min.js"/scriptscript src="js/jquery-ui.min.js"/scriptscript src="js/jquery.fullPage.min.js"/script 接着构建html代码，这里的代码较长，所以中间用…代替 div class="section section1"div class="bg"img src="images/section1.jpg" alt=""/divdiv class="bg11"/divdiv class="bg12"/divdiv class="bg13"/divdiv class="mail"a class="mail-163" href="http://www.jqcool.net/"163邮箱/aa class="mail-126" href="http://www.jqcool.net/"126邮箱/aa class="mail-yeah" href="http://www.jqcool.net/"yeah邮箱/a/divdiv class="hgroup"h1a href="http://www.jq22.com/"网易邮箱6.0/a/h1h2改变，不止所见。/h2/divp class="p11"网易邮箱6.0版2014年最具创意气质的重量级新邮箱，重生光华，为之瞩目。唯美br的视觉设计和视觉化交互，无……
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
项目中使用的jquery版本是jquery-3.2.1，在使用layui弹出全屏iframe窗口时，iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏，代码如下： !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlezqc/title script type="text/javascript" src="js/jquery-3.2.1.min.js"/script link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" /headbodyscript src="layui/layui.js"/scriptscript//一般直接写在一个js文件中layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form;//弹出即全屏 var index = layer.open({ type: 2, content: 'http://layim.layui.com', area: ['320px', '195px'], maxmin: true }); layer.full(index);});/script /body/html 就是因为头部引入了 jquery-3.2.1.min.js 导致iframe窗口无法全屏，效果如下 解决办法： 方法一.使用layui内置的jquery 方法二.使用……