移动端全屏滚动插件 zepto.fullpage.js

模板网 2015-08-10

zepto.fullpage 是专注于移动端的 fullPage.js,依赖 Zepto

下载地址:https://github.com/yanhaijing/zepto.fullpage

功能概述

 

可实现移动端的单页滚动效果,可自定义参数,提供回调接口,和公开接口。

 

兼容性

 

Ios4+

Andriod2.3+(未全部覆盖)

快速上手

 

HTML

<div class="wp">

    <div class="wp-inner">

        <div class="page page1">1</div>

        <div class="page page2">2</div>

        <div class="page page3">3</div>

        <div class="page page4">4</div>

    </div>

</div>

 

CSS

父容器需是固定高度,并且溢出为隐藏,fullpage会使用父元素的宽度和高度。

 

.wp{

    overflow: hidden;            

}

 

js

一行代码即可完成,如此简单:

 

$('.wp-inner').fullpage();

注意:是在.wp-inner上调用的。

相关文章

  1. JS阻止浏览器返回代码

    一段可以阻止浏览器返回的代码,今天无意打开了一个网站,发现怎么也返回不了,仔细研究了一下网站代码找到了无法返回的原因,于是将这段代码提取出来了。 仅供大家学习交流,请勿使用在自己的网站上,这算是一种比较流氓的行为。

  2. 阻止浏览器调试的代码

    一段阻止浏览器调试的代码。

  3. 不错的医院页面挂号下拉效果

    不错的医院页面挂号下拉效果,仅供参考。 效果截图:

  4. 网站新信息标题闪烁效果实现

    网站新信息标题闪烁效果实现,很简单的一个功能,但是非常的实用,能够吸引访客注意,有效提高转化。 效果图:

  5. JS判断手机访问跳转到手机站使用百度uaredirect.js

    使用了百度SIteApp提供的一个判断手机访客的js代码uaredirect.js,来实现当用户使用手机访问我们的PC站的时候自动跳转到我们的手机站。 用法非常简单: 第一段是引用百度的uaredirect.js,本人还是喜欢将代码保存到本地,代码量也不是很大。 第二段是使用代

随机推荐

  1. JS阻止浏览器返回代码

    一段可以阻止浏览器返回的代码,今天无意打开了一个网站,发现怎么也返回不了,仔细研究了一下网站代码找到了无法返回的原因,于是将这段代码提取出来了。 仅供大家学习交流,请勿使用在自己的网站上,这算是一种比较流氓的行为。

  2. 阻止浏览器调试的代码

    一段阻止浏览器调试的代码。

  3. 不错的医院页面挂号下拉效果

    不错的医院页面挂号下拉效果,仅供参考。 效果截图:

  4. 网站新信息标题闪烁效果实现

    网站新信息标题闪烁效果实现,很简单的一个功能,但是非常的实用,能够吸引访客注意,有效提高转化。 效果图:

  5. JS判断手机访问跳转到手机站使用百度uaredirect.js

    使用了百度SIteApp提供的一个判断手机访客的js代码uaredirect.js,来实现当用户使用手机访问我们的PC站的时候自动跳转到我们的手机站。 用法非常简单: 第一段是引用百度的uaredirect.js,本人还是喜欢将代码保存到本地,代码量也不是很大。 第二段是使用代