上下切换滚动效果

基于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>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！