使用fullPage.js遇到的问题以及翻译

使用fullPage.js做一简单页面,遇一古怪问题:.section中的h1标签始终被一插件生成的标签包裹,导致样式调整好不困难!花费数小时排查为何会生成这样一个标签,最终在fullPage.js的英文文档中发现了这样一段话: verticalCentered: (default true) Vertically centering of the content within sections. When set to true, your content will be wrapped by…

fullpage.js全屏滚动插件使用小结

刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件,很多网站现在都使用了其来实现较好的浏览体验. 可以实现的功能: 支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等二.插件下载 npm|npm install…

[转载]fullPage.js中文api 配置参数~

fullPage.js中文api 配置参数选项类型默认值说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 slidesColor 函数无设置背景颜色 anchors 数组无定义锚链接 scrollingSpeed 整数 700 滚动速度,单位为毫秒 easing 字符串 easeInQuart 滚动动画方式 menu 布尔值 false 绑定菜单,设定的相关属性与 anchors 的值对应后,…

高端大气上档次的fullPage.js

简介 4月15日,网易邮箱升级到6.0版本,并发布了介绍页面,页面采用了时下非常流行的"全屏"效果,文字.图片再加上 CSS3 动画,让用户非常直观.清晰的了解6.0版本的功能及特色,真是高端大气上档次. 如此高大上的页面,想不想自己也做一个?今天我们就用 fullPage.js 仿照着制作一个类似的页面. 制作方法 1.引入文件引入以下文件,你可以将 js 放到页面底部. <link rel="stylesheet" href="css/jque…

fullPage.js学习笔记

中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看demo 一.简介 fullPage.js 是一个基于jQuery的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触屏事件 4.支持css3动画 5.支持窗口缩放 6.窗口缩放时自动调整 7.可设置滚动宽度.背景颜色.滚动速度.循环选…

jQuery全屏滚动插件fullPage.js

github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /> <script src="http://ajax.googleapis.com/ajax/libs/…

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

今天是端午自己做了一个小的送祝福链接这里用到了fullpage插件 $('#container').fullpage({ navigation: false, //navigation是否显示导航,默认为false easing: 'easeInQuart', scrollingSpeed: 400, loopBottom: false, loopTop: false, afterLoad: function(anchorLink, index) {//最后一页不显示向上滑动…

FullPage.js – 轻松实现全屏滚动（单页网站）效果

FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 立即下载效果演示 - QQ交流群 => JavaScript技术专区:687…

jquery.fullPage.js全屏滚动插件教程演示

css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} .section2 p { position: relative; left: -%;} .section3 p { position: relative; bottom: -%;} .section4 p { display: none;} &…

jQuery+fullPage.js演示10种全屏滚动

基本演示背景演示循环演示回调函数演示绑定菜单演示项目导航演示自动滚动 slide自动滚动响应式下载地址实例代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>fullPage.js - 基本演示_手册网</title> <link rel="stylesheet&…

记录一款不错的插件fullpage.js

下载链接包括一些实例: http://www.dowebok.com/demo/2014/77/ 当然也可以从Github 上下载: https://github.com/alvarotrigo/fullPage.js 使用这个插件可以很轻松的完成一个看似高大上的网页.全屏切换.…

fullpage.js 结合固定导航栏—实现定位导航栏

开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工作肯定是要先导入fullpage.js啦: 官网是https://github.com/alvarotrigo/fullPage.js <link rel="stylesheet" href=&q…

fullPage.js

https://github.com/alvarotrigo/fullPage.js 下载地址 demo:http://pan.baidu.com/s/1o8QWCmm 演示:http://fullpagedemo.applinzi.com/ 主要功能有: 支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 <link rel="style…

FullPage.js全屏滚动插件学习总结

如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js 主要功能有: 支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等实…

FullPage.js全屏滚动插件的配置项、方法和回调函数

fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 1.选项选项类型默认值说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 slidesColo…

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

演示下载简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS…

《fullPage.js》创建全屏滚动的网站

插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性主要功能支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等使用方法 1.引入文件 <link rel="stylesheet" href="css/jquery.ful…

fullPage.js插件用法（转发）

fullPage.js主要功能有: 支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等模板展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible&qu…

整屏滚动效果 jquery.fullPage.js插件+CSS3实现

最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdiy.com/hxw/ss/h/index.html 移动端:http://demo.qpdiy.com/hxw/ss/h/s.html 首先使用要引入插件 <link rel="stylesheet" href="../c/jquery.fullPage.css"…

【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果！

前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可以借助jQuery插件来实现,今天我们来尝试使用move.js以及fullPage.js插件来制作一个"高端网站". 网站效果展示如下: fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动支持前进后退和键盘控制多…

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

文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js 是一个基于 jQuery 的插件,它能够…

fullpage.js的easing参数怎样配置自定义动画

首先看非官方文档并没有详细的说明怎样去使用easing.js,所以我加的运动属性根本就不起作用, 再看,官方文档 Optionally, when using css3:false, you can add the jQuery UI library in case you want to use other easing effects apart from the ones included in the jQuery library (linear and swing ) or the…

Fullpage.js全屏滚动jQuery插件

兼容性: 支持 IE8+ 及其他现代浏览器. 主要功能: 1.支持鼠标滚动: 2.支持前进后退键盘控制; 3.多个回调函数; 4.支持手机.移动设备; 5.支持窗口缩放自动调整; 6.可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等; 7.支持CSS3动画; 实现方法: 1.插入jquery.fullPage.css; 2.插入jquery.js; 3.插入jquery-ui.js;(用于制作动画) 4.插入jquery.fullpage.js; 1 <link rel=&quo…

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

不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可以爆表似的.当然,不得不承认,介绍产品的页面用单页网站似乎确实高大上的多. 在站长之家看到一篇文章,让我对单页网站有了探索的热情.文章这么写的:“随着单页网站从未经考验的即兴创作一跃成为受人热捧的潮流趋势,垂直滚动的理念正式成了人们目光聚焦的中心.与此同时,设计师们也在大踏步地创新,力求让这一趋势在…

fullpage.js参数参考

fullpage函数里面的参数: //Navigationmenu: false,//绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false.anchors:['firstPage', 'secondPage'],//anchors定义锚链接,默认为[]lockAnchors: false,//是否锁定锚链接,默认为false,设为true后链接地址不会改变navigation: false,//是否显示导航,默认为falsenavigationPosition:…