制作手机相册 全屏滚动插件fullpage.js
今天是端午自己做了一个小的送祝福链接 
这里用到了fullpage插件
$('#container').fullpage({
navigation: false, //navigation是否显示导航,默认为false
easing: 'easeInQuart',
scrollingSpeed: 400,
loopBottom: false,
loopTop: false,
afterLoad: function(anchorLink, index) {//最后一页不显示向上滑动 此处index设置从1开始的
if(index == page_num){
$('.slide_up_tip').hide();
}else{
$('.slide_up_tip').show();
}
onLeave: function(index, nextIndex, direction) {//当页面过长导致安卓卡顿,使用下面的方法,需要在onload后显示前两页
var index = index - 1; //让index和jquery eq一样从0开始,省的看着心烦
if(direction == 'down'){ //index大于第2页执行
if(index >= 1) $('.fp-section:eq('+(index-1)+')').css('visibility', 'hidden');
//index小于倒数第2执行
if(index <= page_num - 2) $('.fp-section:eq('+(index+2)+')').css('visibility', 'visible');
}else{ //index小于倒数第2执行
if(index <= page_num - 2) $('.fp-section:eq('+(index+1)+')').css('visibility', 'hidden');
//index大于第2页执行
if(index >= 1) $('.fp-section:eq('+(index-2)+')').css('visibility', 'visible');
}
}
})
官方地址:https://github.com/alvarotrigo/fullPage.js



制作手机相册 全屏滚动插件fullpage.js的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
- jQuery 全屏滚动插件 fullPage.js 参数说明
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...
- 经典全屏滚动插件fullPage.js
要写简单可以写的很简单,对着github上面的参数和注释随便写了个demo.这个插件十分高端大气上档次,配上良好的配色和布局,简单几笔就可以把网站装扮得十分洋气. 唯一的缺点就是,感觉对移动端的兼容性 ...
- jQuery全屏滚动插件fullPage.js
github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...
随机推荐
- input文本框设置和移除默认值
input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...
- spring Quartz多个定时任务的配置
Quartz多个定时任务的配置 1,配置文件与spring整合,需要在spring 的总配置中一入或者在web.xml中spring监听中加上 ztc_cp-spring-quartz.xml 注:定 ...
- 如何破解mac版UltraEdit?
Rodolfo教你如何破解UtralEdit? 第一步:去官网下载原载,先运行一次: 第二步:在终端里执行下面代码就可以破解完成!printf '\x31\xC0\xFF\xC0\xC3\x90' | ...
- 与你相遇好幸运,Settings
IDE-Java-Setting && IDE-Nodejs-Setting Download
- SpringMVC学习(一)
Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分. Web MVC架构 1.用户发起request请求至控制器(Controller) 控制接收用户请求的数 ...
- sql对于between和时间
在写时间条件 ,比如 把2014/3/1 到2014/3/31这个时间段做为条件 的话,很多人都会写成这样 select date from table where date between '201 ...
- CompletionService/ExecutorCompletionService/线程池/concurrent包
线程池 线程池的基本思想:线程频繁的创建.销毁会极大地占用系统资源,为了减少系统在创建销毁线程时的开销,线程池应运而生.线程池包括多个已创建的线程,当有任务要在新线程中执行时,将任务提交给线程池,线程 ...
- /var/run/yum.pid 已被锁定,PID 为 XXXX 的另一个程序正在运行。
安装st-load时, 终端提示 “/var/run/yum.pid 已被锁定,PID 为 13908 的另一个程序正在运行.” 解决方法:直接在终端运行 rm -f /var/run/yum.pid ...
- Linux学习笔记(2)-开机
今天开始学习Linux系统. 打开虚拟机,输入密码后,令人激动的画面就蹦出来了-- Ubuntu的主要基调是橙色,给人一种蠢萌蠢萌的感觉,和Windows不同,它只在左边有一条任务栏,上面有些东西,搜 ...
- 【随笔】MQTT简介
我们知道,将用户使用的设备称为客户端,将提供给用户信息的端口称为服务器端.两个端口之间可以通过多种通信协议进行交互,比如HTTP(同步)或者基于消息传递的异步. HTTP是一种同步无状态的协议,不支持 ...