zepto.fullpage

移动端全屏滚动插件
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 手机/移动开发、 手机开发包
软件类型 开源软件
地区 国产
投 递 者 壤驷阳冰
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

功能概述

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

兼容性

  • 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上调用的。

更多例子,请移步这里

  • zepto.fullpage在这里主要是用作移动端无缝滑屏滚动 具体调用方式: $('el').fullpage({ page: '.page', start: 0, duration: 500, drag: false, loop: false, dir: 'v', change: function () {}, beforeCha

  • 内容来自:颜海镜 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, in

  • fullpage插件 默认阻止手指触摸事件,如果是移动端项目的话,使用zepto.fullpage.js 这个插件中有unholdtouch方法可以启动touch事件   使用mui制作轮播图,轮播图部分的代码,是使用模板引擎进行渲染的,会出现图片无法轮播的问题,需要对mui中的轮播组件进行初始化 mui('#slider').slider({ interval: 1000 });  

  • 首先,zepto.fullpage.js插件是依赖Zepto的。所以在使用之前需要先引入Zepto.js 参数配置 fullPage支持无参数的调用,每个参数都会有默认值,如果想实现自定义的功能,可以使用自定义参数。自定义参数如下: $('*').fullpage({ page: '.page', start: 0, duration: 500,

  • 随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米、魅族、苹果等等知名站点的新品页面,以及360、百度等网站的专题页面越来越采用分屏滚动的风格。 当然实现这种风格的方法有多种多样的,千奇百怪。但在这里就不得不提到一款较轻量级的基于jQuery的JS类库,那就是fullPage.js,该库的开发版大小约为90kb,为压缩版JQ的大小,而压缩版为20KB左右。包括魅族、苹果等

  • 前阵子在项目中用到fullpage,过来分享一下: 现在我们看到很多的网站都是全屏滚动的,是不是很高大上呢?答案是肯定的,fullpage就是让你的网页高大上的原因,一起来看看吧: 我搜集了2种fullpage,一个是基于jQuery的,一个是基于Zepto的,两个资料我都会放到下载中。这里主要说说基于jQuery的内容。 fullPage.js是一个基于jQuery的插件,兼容 jQuery 1

  • https://www.jq22.com/search?seo=swiper%e4%b8%8b%e6%8b%89%e5%88%b7%e6%96%b0%ef%bc%8c%e4%b8%8a%e6%8b%89%e5%8a%a0%e8%bd%bd&PageNo=2 https://github.com/MickJson/LittleVideo https://www.jiangweishan.com/ar

  • <script type="text/javascript" src="js/jquery.min.js"></script> <script>$.noConflict();</script>   转载于:https://www.cnblogs.com/theWayToAce/p/7199181.html

 相关资料
  • 本文向大家介绍学习使用jquery iScroll.js移动端滚动条插件,包括了学习使用jquery iScroll.js移动端滚动条插件的使用技巧和注意事项,需要的朋友参考一下 大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是

  • 本文向大家介绍基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage,包括了基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage的使用技巧和注意事项,需要的朋友参考一下 先给大家展示效果图如下所示: 使用方法: 首先在head区引入jquery.js,jquery-ui.js,fullPage.js以及样式文件jquery.fullPage.css 接着构建html代码,这里的代

  • 在使滚动系列事件正常运行方面存在问题(根本不符合设计)。已经浏览了所有关于此的文章、代码建议和其他帮助主题,但没有人能够解释为什么此示例根本不起作用: 基本页面html: 好的,如果复制粘贴,则需要替换包含文件,并且版本可能不同。对这种行为表示怀疑。当我取出jquery时。移动包含该脚本按预期工作,每当滚动位置改变时,都会将滚动注释记录到控制台中。 当我包含jquery.mobile页面加载时它会

  • 本文向大家介绍Javascript 实现全屏滚动实例代码,包括了Javascript 实现全屏滚动实例代码的使用技巧和注意事项,需要的朋友参考一下 JS 全屏滚动 参照fullPage.js的效果,用自己的想法实现的。 实现的效果:1、全屏滚动,滚动一下齿轮就会滚动全屏。 2、自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏。 下一步计划: 1、改成react组件 2、实现更多的效果

  • 本文向大家介绍jQuery实现带滚动导航效果的全屏滚动相册实例,包括了jQuery实现带滚动导航效果的全屏滚动相册实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下: 运行效果图如下: 主要代码如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 我正在使用添加元素的JscrollPane,当元素超过7个时,JscrollPane中的JScrollBar将被激活。我需要当我引入一个新元素时,滚动条向右移动 构造函数: 滚动条向右移动,但从来没有达到最大值,总是有多一点的距离滚动。 有人知道为什么会这样吗?我看到使用setValue和getMaximum将滚动条向右移动,但对我来说,它停留在靠近右边的地方,而不是右边。 下面是一张截图来看看。

  • 本文向大家介绍移动端横屏的JS代码(beta),包括了移动端横屏的JS代码(beta)的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了 具体代码如下所示: 以上js代码是实现移动端横屏的核心代码,代码简单易懂,所有没给大家附太多的注释,如果大家哪里有不明白的地方欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍vue移动端屏幕适配详解,包括了vue移动端屏幕适配详解的使用技巧和注意事项,需要的朋友参考一下 flexible vue移动端屏幕适配,查看项目地址 效果预览 # 项目clone git clone git@github.com:NicolasGui/flexible.git # 进入项目目录 cd flexible # 安装依赖 npm install # 启动服务 localh