当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery multiScroll插件实现全屏鼠标滚动切换页面特效方法

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

  • 发布时间:
  • 作者:码农之家
  • 点击:211

这篇文章主要知识点是关于jquery全屏滚动插件、jQuery、multiscroll、jquery全屏插件、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践
  • 类型:前端开发大小:167.1 MB格式:PDF作者:阮晓龙
立即下载

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

经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款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> 

查看DEMO   脚本下载

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

相关电子书
学习笔记
网友NO.606652

基于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的视觉设计和视觉化交互,无……

网友NO.606451

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 方法二.使用……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com