1.fullPage.js是什么?

fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件。

2.兼容性:

- jquery兼容:兼容 jQuery 1.7+

- 浏览器兼容: IE8+,Chrome,FireFox

3.问题:

根据使用文档,轻松实现了全屏,但是当在某一屏中,内部的子元素中需要实现滑动的轮播效果,一开始,我就直接在$(document).ready()里面写方法,但是网页上除了按钮可以变色外,没有任何滑动效果。经过调试,发现按钮点击事件是进去了的,但就是感觉实现滑动那一块代码没有效果。

首先,重新查阅API,发现有个屏内分屏的功能,只需要添加样式slide即可,终于可以滑动了,然而,却发现,按钮点击不准确,如果有3屏,当点击第1个按钮时,并没有提示什么,点击第2个时,才提示index为1,导致最后一屏始终无法显示,也就是说页面是后延了。研究了很久,没有找到解决方法。本来,这个效果用fullpage自带的slide实现是不合适的。因为,滑动的元素并不是完全占一屏,它只是按钮切换后才显示的。

后来,我通过stackOverflow搜索fullpage相关的问题,发现有个问题和我的很像,“My other plugins don't work when using fullPage.js”,回答里介绍了一个网址,https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions,从中我终于明白了原因所在。大概意思是,fullPage.js会把这些元素包裹在一个随时可改变自身位置的元素中,所以这些元素就成为了动态添加的元素,而大多数插件则需要靶元素最初保持在原位,才能正常执行。

所以解决方法就是:在fullPage.js的afterRender回调方法里,初始化插件或者jquery事件。

注意:并不是所有的插件或者jquery事件都必须在fullPage.js的afterRender里初始化,涉及改变位置的才需要。

jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  3. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  4. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  5. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

  6. jQuery 全屏滚动插件 fullPage.js 参数说明

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  7. jQuery全屏滚动插件fullPage.js

    github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...

  8. jQuery全屏滚动插件fullPage使用

    1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> &l ...

  9. 制作手机相册 全屏滚动插件fullpage.js

    今天是端午自己做了一个小的送祝福链接  这里用到了fullpage插件 $('#container').fullpage({ navigation: false,        //navigatio ...

随机推荐

  1. 晒一下MAC下终端颜色配置

    效果图: ~/.vimrc 配置 filetype on set history=1000 set background=dark syntax on set autoindent set smart ...

  2. 2018.3.16 win 关闭自动更新代码

    新建一个文本文件修改后缀名为 .bat 格式 net stop wuauserv sc config wuauserv start=disabled shutdown -r -t 1

  3. python判断平衡二叉树

    题目:输入一棵二叉树,判断该二叉树是否是平衡二叉树.若左右子树深度差不超过1则为一颗平衡二叉树. 思路: 使用获取二叉树深度的方法来获取左右子树的深度 左右深度相减,若大于1返回False 通过递归对 ...

  4. CentOS更改时区

    1.编辑文件 vi /etc/sysconfig/clock 修改内容 ZONE="Asia/Shanghai" 2.覆盖旧时区文件 cp /usr/share/zoneinfo/ ...

  5. QT5:介绍

    一.简介 QT是一个跨平台的C++开发库,主要用来开发图形用户界面(Graphical User Interface,GUI) QT除了可以绘制漂亮的界面(包括控件/布局/交互),还可以多线程/访问数 ...

  6. rem和em的区别

    原文链接:http://caibaojian.com/rem-vs-em.html rem 单位如何转换为像素值 当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的 ...

  7. LNMP的环境搭建

    新装的Linux 机器,还没有来得及安装网站环境,这篇文章就是记录一下自己安装LNMP的一般步骤. 之前在Laravel视频中看过这段的讲解,后来也试着安装过,基本的命令不算是熟练掌握,所以还要看看之 ...

  8. vue里的数据

    背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件 ...

  9. destoon公司账户增加销售区域等下拉列表配置

    开始接触dt时不了解,其实直接用自定义字段即可.不过既然改过了,就记录一下. 在后台系统设置,模块管理,点击会员模块最后的设置图表 打开会员模块设置 如图 增加 主要销售区域 并在公司修改页面调用 1 ...

  10. Yii2 基于rbac访问控制

    Yii2 是一款非常强大的PHP底层框架, 牛b的人都喜欢用它, 有时候你们可能会发现, Yii2 底层处理不是很好, 比如: 每次分页, yii底层都会多统计一次数据的总条数!  那只能说你对它还不 ...