当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

使用AppLikeOnePage.js插件需要在页面中引入jquery和onepage.js文件。

```html
<script src="path/to/jquery.min.js"></script>
<script src="path/to/onepage.js"></script>   
```               
#####  HTML结构
该单页布局的基本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属性来阻止滚动条的出现。

```html
body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  color: #fff;
}     
``` 
然后为每一个分段section设置一个颜色。

```html
.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;}  
```                
垂直圆点导航按钮的基本样式如下：

```html
#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来调整它们之间的距离。

```html
#radioOn{
      width:20px;
      height:20px;
      margin-bottom:12px;
      position: absolute;
      top:0; left:0;
      background-color: #fff;
      border-radius: 50%;
}      
```            
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过startOnePage()方法来初始化该单页布局插件。

```html
$(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效果。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果