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

 更新时间:2015年04月12日 17:08:02   投稿:hebedich  
本文给大家分享的是一款jQuery整屏(全屏)滚动插件网页特效,滚动鼠标滚轮整屏一屏滚动切换代码,可设置文字/图片绝对上下左右居中显示JS代码,时下最流行的jQuery全屏滚动插件!(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)

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

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

相关文章

  • jquery 按钮状态效果 正常、移上、按下

    jquery 按钮状态效果 正常、移上、按下

    按钮的各状态效果在网页设计过程中经常会遇到,下面写个jquery扩展,使这个过程更加方便,感兴趣的朋友可以了解下
    2013-08-08
  • JQuery验证工具类搜集整理

    JQuery验证工具类搜集整理

    本文搜集整理了一些如邮箱、手机号码、电话号码、邮编、数字、判断是否为空、正则匹配等等常用验证;感兴趣的朋友可以了解下
    2013-01-01
  • js/jquery判断浏览器的方法小结

    js/jquery判断浏览器的方法小结

    在网站前端开发中,浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把各种判断方法都总结一下,希望对大家有所帮助
    2014-09-09
  • JQuery 选择和过滤方法代码总结

    JQuery 选择和过滤方法代码总结

    JQuery 选择和过滤方法代码总结,学习jquery的朋友可以参考下。
    2010-11-11
  • jQuery实现连续动画效果实例分析

    jQuery实现连续动画效果实例分析

    这篇文章主要介绍了jQuery实现连续动画效果,实例分析了animate方法实现动画效果的相关技巧,并备有较为详尽的注释供读者学习参考,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 实例详解jQuery结合GridView控件的使用方法

    实例详解jQuery结合GridView控件的使用方法

    这篇文章主要以实例的方式详细介绍了jQuery结合GridView控件的使用方法,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 详解layui中的树形关于取值传值问题

    详解layui中的树形关于取值传值问题

    本篇文章主要介绍了详解layui中的树形关于取值传值问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • jquery动态添加option示例

    jquery动态添加option示例

    jquery动态添加option选项,还有动态删除的方法,大家参考使用吧
    2013-12-12
  • Javascript jquery css 写的简单进度条控件

    Javascript jquery css 写的简单进度条控件

    很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成(Web 2.0 的特色)。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂,无非就是获得总的处理条目,然后获得一个百分比,再显示输出。
    2008-03-03
  • 自制轻量级仿jQuery.boxy对话框插件代码

    自制轻量级仿jQuery.boxy对话框插件代码

    最近再做价值中国微博,从用户体验的角度,将很多常用的window.alert或者window.confirm之类比较生硬死板冷不丁的提示改为弹出层的方式实现。
    2010-10-10

最新评论