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">

2cssʽ
<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>

4footerjs룺
<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>

