jQuery单页全屏滚动布局插件AppLikeOnePage.js

所属分类：UI-滚动

39620 483 查看评论 (13)

分享到微信朋友圈

查看演示立即下载

插件描述：AppLikeOnePage.js是一款简单实用的App样式单页全屏滚动布局jQuery插件。通过该插件可以非常容易的创建单页全屏滚动布局，页面不带滚动条，可以通过鼠标或键盘方向键来整屏滚动页面。

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"
  });
});