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

所属分类:UI-滚动

 38190  483  查看评论 (13)
分享到微信朋友圈
X
jQuery单页全屏滚动布局插件AppLikeOnePage.js ie兼容6

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

配置参数

  • AppLikeOnePage.js插件的可用配置参数有:

  • frame:整个单页布局的包装容器的选择器。

  • container:单页布局的二级包装容器的选择器。

  • sections:每个分段的class选择器。

  • radio:垂直圆点导航按钮的选择器。

  • radioOn:激活状态的圆点按钮的选择器。

  • speed:页面滚动的速度,单位毫秒。

  • easing:页面滚动的easing效果。


相关插件-滚动

jQuery元素滚动监听插件xRoll.js

xRoll.js 元素滚动监听插件 元素出现在窗口的时候在执行自定义的函数
  滚动
 23411  324

简洁的jQuery滚动条插件scrollBar.js

本插件会将容器中滚动条样式进行统一,通过修改css任意改变滚动条的宽度与颜色,实现自定义滚动条的目的。
  滚动
 61677  383

jQuery自定义滚动条插件

支持IE9及以上,360,谷歌,火狐的自定义滚动条,可以设置滚动条的初始位置以及滚动条的颜色等
  滚动
 25095  315

jquery文字上下滚动

jquery文字上下滚动插件jqScroll.js调用简单,代码注释很清楚。
  滚动
 56668  509

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    伴你余生@ 0
    2019/4/27 13:57:06
    手机端不能滑动怎么办?
    回复
    七海七海七海。 0
    2018/7/27 10:41:51
    怎么多添加一页滚屏啊 回复
    SouL1 0
    2017/10/7 10:33:53

    这个有bug,但连续点几个右侧导航,右侧导航的顺序就乱了。。

    回复
    飞翔♂の风 0
    2017/8/10 10:19:41

    楼主在不你这个有bug啊,就是依次点击按钮,到最后直接点击第一个按钮就会出现不存在的内容,导航按钮也会乱掉,可以给修复下么

        qian1120
        2018/10/23 15:33:33
        修改一下speed改成200快点就没这个问题了
    回复
    38.6°℃ 0
    2017/7/12 11:44:37

    如何不循环呢?

    回复
    YG。 0
    2017/1/13 16:01:15
    这个可以添加锚点吗? 点击按钮跳下一页 回复
    a806946052 0
    2016/8/11 8:08:28
      0
    2016/8/10 23:08:46
    手机手势滑动没效果 回复
    yy981420974 0
    2016/6/20 16:06:02
    我想知道的是不是真的兼容弄IE6 回复
    yy981420974 0
    2016/6/20 16:06:58
    简单实用,不复杂 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复