亲宝软件园·资讯

展开

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

人气:0

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

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

加载全部内容

相关教程
猜你喜欢
用户评论