特效介绍
multiScroll上下切换滚动切换效果
基于multiScroll上下切换滚动切换效果,当点击切换按钮的时候,左边会向上滚动,右边会向下滚动,并且会回弹,效果非常炫酷。最大的特色是,本插件自适应布局,可以放在手机上不会变形。
使用方法
1、如果本效果放在手机上,请在head加入下面的代码:
<meta name="viewport" content="width=device-width; initial-scale=1.0"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">2、引入下面的css样式:
<link rel="stylesheet" href="css/page.css" /> <link rel="stylesheet" href="css/jquery.multiscroll.css" />3、在需要使用本特效的地方加入下面的代码,请把DIV里面的内容替换成自己需要的内容。
<div id="header">头部</div> <div id="multiscroll"> <div class="ms-left"> <div class="ms-section">左1</div> <div class="ms-section active">左2</div> <div class="ms-section">左3</div> </div> <div class="ms-right"> <div class="ms-section">右1</div> <div class="ms-section active">右2</div> <div class="ms-section">右3</div> </div> </div> <div id="footer">底部</div>4、在footer引入下面的js代码:
<script type="text/javascript" src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.easings.min.js"></script> <script type="text/javascript" src="js/jquery.multiscroll.min.js"></script> <script type="text/javascript"> $(function(){ $('#multiscroll').multiscroll({ sectionsColor:['#1bbc9b', '#de564b', '#f9b755'] , loopTop:true , loopBottom:true , navigation:true , navigationTooltips:['page1','page2','page3'], easing: 'easeOutBack' , paddingTop:'70px' , paddingBottom:'70px', afterRender: function(){ //alert('初始化完成') ; }, afterResize:function(){ //alert('浏览器窗口大小调整了') ; }, onLeave:function(){ //alert('开始滚动') ; }, afterLoad:function(){ //alert('滚动完成') ; } }); }); </script>