今天前端哥分享的是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' }); });就上面这点代码，很简单吧
