设为首页 - 加入收藏
广告 1000x90
您的当前位置:主页 > 资源 > 效果代码 > 正文

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

来源:未知 编辑:admin 时间:2015-09-02
经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度、easing:动画效果、navigation:false是否出现导航,还支持事件Callback函数调用,onLeave、afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12、以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用。
jQuery全屏鼠标滚动切换页面特效插件multiScroll.js
使用方法:
1.加载插件和jQuery
  1. <link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" /> 
  2. <script src="libs/jquery/1.9.1/jquery.min.js"></script> 
  3. <script src="vendors/jquery.easings.min.js"></script>    
  4. <script type="text/javascript" src="jquery.multiscroll.js"></script> 
2.HTML内容
  1. <div id="multiscroll"> 
  2.     <div class="ms-left"> 
  3.         <div class="ms-section">Some section</div> 
  4.         <div class="ms-section">Some section</div> 
  5.         <div class="ms-section">Some section</div> 
  6.     </div> 
  7.     <div class="ms-right"> 
  8.         <div class="ms-section">Some section</div> 
  9.         <div class="ms-section">Some section</div> 
  10.         <div class="ms-section">Some section</div> 
  11.     </div> 
  12. </div> 
3.函数调用
  1. <script type="text/javascript"> 
  2. $(document).ready(function() { 
  3.     $('#multiscroll').multiscroll{ 
  4.         verticalCentered : true, 
  5.         scrollingSpeed: 700, 
  6.         easing: 'easeInQuart', 
  7.         menu: false, 
  8.         sectionsColor: [], 
  9.         navigation: false, 
  10.         navigationPosition: 'right', 
  11.         navigationColor: '#000', 
  12.         navigationTooltips: [], 
  13.         loopBottom: false, 
  14.         loopTop: false, 
  15.         css3: false, 
  16.         paddingTop: 0, 
  17.         paddingBottom: 0, 
  18.         normalScrollElements: null,  
  19.         keyboardScrolling: true, 
  20.         touchSensitivity: 5, 
  21.  
  22.         //events 
  23.         onLeave: function(index, nextIndex, direction){}, 
  24.         afterLoad: function(anchorLink, index){}, 
  25.         afterRender: function(){}, 
  26.         afterResize: function(){}, 
  27.     }); 
  28. }); 
  29. </sript> 

相关推荐:

网友评论:

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
Copyright © 2021 众联设计之家

Power by DedeCms

Top