首页 > 特效插件 > 滚动轮播 >  上下切换滚动效果正文

上下切换滚动效果

特效介绍
multiScroll上下切换滚动切换效果
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>