AppLikeOnePage.js是一款简单实用的App样式单页全屏滚动布局jQuery插件。通过该插件可以非常容易的创建单页全屏滚动布局,页面不带滚动条,可以通过鼠标或键盘方向键来整屏滚动页面。
使用方法
使用AppLikeOnePage.js插件需要在页面中引入jquery和onepage.js文件。
<script src="path/to/jquery.min.js"></script> <script src="path/to/onepage.js"></script>
HTML结构
该单页布局的基本HTML结构如下:
<div id="view"> <div id="frame"> <div class="op-section">section0</div> <div class="op-section second">section1</div> <div class="op-section third">section2</div> <div class="op-section fourth">section3</div> <div class="op-section fifth">section4</div> <div class="op-section last">section5</div> </div> </div> <!-- 垂直圆点导航按钮 --> <div id="radioWrap"> <ul id="radio"> <li>section0</li> <li>section1</li> <li>section2</li> <li>section3</li> <li>section4</li> <li>section5</li> </ul> <span id="radioOn"></span> </div>
CSS样式
你i需要为整个布局设置overflow-y: hidden
属性来阻止滚动条的出现。
body { margin: 0; padding: 0; overflow-y: hidden; color: #fff; }
然后为每一个分段section设置一个颜色。
.op-section{background-color:#1abc9c;} .second{background-color:#3598db;} .third{background-color:#34495e;} .fourth{background-color:#2ecc71;} .fifth{background-color:#8e44ad;} .last{background-color:#f39c12;}
垂直圆点导航按钮的基本样式如下:
#radioWrap{ width:20px; height:180px; position:absolute; right:5%; top:50%; margin-top: -90px;} #radio{width:100%; height:100%; overflow: hidden;} #radio li{ width:20px; height:20px; background-color: rgba(255,255,255, 0.5); text-indent: -10000px; border-radius: 50%; margin-top: 12px; cursor:pointer;} #radio li:first-child{margin-top:0;}
#radioOn
元素是代表当前激活的section的圆点,需要将它设置为绝对定位,并通过margin来调整它们之间的距离。
#radioOn{ width:20px; height:20px; margin-bottom:12px; position: absolute; top:0; left:0; background-color: #fff; border-radius: 50%; }
初始化插件
在页面DOM元素加载完毕之后,可以通过startOnePage()
方法来初始化该单页布局插件。
$(document).ready(function(){ startOnePage({ frame: "#view", container: "#frame", sections: ".op-section", radio: "#radio", radioOn: "#radioOn", speed: 500, easing: "swing" }); });
配置参数
AppLikeOnePage.js插件的可用配置参数有:
-
frame
:整个单页布局的包装容器的选择器。 -
container
:单页布局的二级包装容器的选择器。 -
sections
:每个分段的class选择器。 -
radio
:垂直圆点导航按钮的选择器。 -
radioOn
:激活状态的圆点按钮的选择器。 -
speed
:页面滚动的速度,单位毫秒。 -
easing
:页面滚动的easing效果。
AppLikeOnePage.js单页布局插件的github地址为:https://github.com/jayjnu/AppLikeOnePage.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!