jQueryjs一次滚动一屏全屏滚动插件

今天前端哥分享的是js插件，一次滚动一屏全屏滚动插件，有需要用到的兄弟可以下载下来根据需求直接使用，需要引入jquer

引入文件：可以在上面下载

<script src="js/jquery.min.js"></script><script src="js/jquery.onepage-scroll.min.js"></script>复制

css代码：

body, html { margin: 0; overflow: hidden; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; transition: opacity 400ms; }			body, .onepage-wrapper, html { display: block; position: static; padding: 0; width: 100%; height: 100%; }			.onepage-wrapper { width: 100%; height: 100%; display: block; position: relative; padding: 0; -webkit-transform-style: preserve-3d; }			.onepage-wrapper .section { width: 100%; height: 100%; }			.onepage-pagination { position: absolute; right: 10px; top: 50%; z-index: 5; list-style: none; margin: 0; padding: 0; }			.onepage-pagination li { padding: 0; text-align: center; }			.onepage-pagination li a { padding: 10px; width: 4px; height: 4px; display: block; }			.onepage-pagination li a:before { content: ''; position: absolute; width: 4px; height: 4px; background: rgba(0,0,0,0.85); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }			.onepage-pagination li a.active:before { width: 10px; height: 10px; background: none; border: 1px solid #FFFFFF; margin-top: -4px; left: 8px; }			.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper { overflow: auto; }			.disabled-onepage-scroll .onepage-wrapper .section { position: relative !important; top: auto !important; left: auto !important; }			.disabled-onepage-scroll .onepage-wrapper { -webkit-transform: none !important; -moz-transform: none !important; transform: none !important; -ms-transform: none !important; min-height: 100%; }			.disabled-onepage-scroll .onepage-pagination { display: none; }			body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html { position: inherit; }			.page1 { background-color: #1bbc9b; }			.page2 { background-color: #FF7F50; }			.page3 { background-color: #4BBFC3; }			.page4 { background-color: #f90; }			p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center; }复制

html代码：

		<div class="main">			<div class="page page1">				<p class="title">第一屏</p>			</div>			<div class="page page2">				<p class="title">第二屏</p>			</div>			<div class="page page3">				<p class="title">第三屏</p>			</div>			<div class="page page4">				<p class="title">第四屏</p>			</div>		</div>复制

js初始化-js代码

$(function() {				$('.main').onepage_scroll({					sectionContainer: '.page'				});			});复制

就上面这点代码，很简单吧