• 会员中心
  • 当前位置:首页 > 资源 > 效果代码 >

    jQuery全屏鼠标滚动切换页面特效插件multiScroll.js
    栏目分类:效果代码   发布日期:2015-09-02   浏览次数:

    经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll js,支持众多的参数自定义配置,scrollingSpeed:切换速度、easing:动画效果、na
    经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款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> 
       鲁ICP备14021093号 鲁B2-20140050   关于我们 | 广告合作 | 版权声明 | 意见反馈 | 联系方式 | 原创投稿 | 网站地图 |
    特效 教程 资源 资讯