简单实用的App样式单页全屏滚动布局jQuery插件

当前位置:主页 > jQuery库 > 布局和界面 > 简单实用的App样式单页全屏滚动布局jQuery插件
简单实用的App样式单页全屏滚动布局jQuery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:05-16
    阅读:
简要教程

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