fullpage

fullPage.js

感情迁移 提交于 2020-04-01 06:59:43
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 --> <script src="js/jquery.easings.min.js"></script> <!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 --> <script src="js/jquery.slimscroll.min.js"></script> <script src="js/jquery.fullPage.js"></script> $(function(){ $('#fullpage').fullpage(); }); HTML <div

fullpage.js 具体使用方法

谁说胖子不能爱 提交于 2020-04-01 06:59:23
1.fullpage.js 下载地址 https://github.com/alvarotrigo/fullPage.js 2.fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等 3.在相应的HTML页面中引入一下文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 --> <script src="js/jquery.easings.min.js"></script> <!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 --> <script src="js/jquery.slimscroll.min.js"></script> <script src="js

fullpage.js

爱⌒轻易说出口 提交于 2020-04-01 06:58:49
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等 1 2 3 4 5 6 7 8 9 10 < link rel="stylesheet" href="css/jquery.fullPage.css"> < script src="js/jquery.min.js"></ script > <!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 --> < script src="js/jquery.easings.min.js"></ script > <!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 --> < script src="js/jquery.slimscroll.min.js"></ script > < script src="js/jquery.fullPage.js"></ script > 1 2 3 $( function ()

fullpage

独自空忆成欢 提交于 2020-04-01 06:58:10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullpage</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.css"> <style> .slide{ text-align: center; } #fullpageMenu{ position: fixed; top: 0; z-index: 999; } </style> </head> <body> <ul id="fullpageMenu"> <li data-menuanchor='page1' class="active"><a href="#page1">1 section</a></li> <li data-menuanchor='page2'><a href="#page2">2 section</a></li> <li data

H5C3---《购物车宣传》案例---jQuery FullPage插件

送分小仙女□ 提交于 2020-02-11 13:39:26
H5C3 《购物车宣传》案例 综合运用h5c3知识且进行一定扩展 能使用jquery完成网页常见交互行为 实际工作开发当中能应对活动宣传页 FullPage插件 插件功能介绍 基于 jQuery 的插件,它能够帮你很方便、很轻松的制作出全屏网站。 支持鼠标滚动,支持前进后退和键盘控制,多个回调函数, 支持手机、平板触摸事件,支持 CSS3 动画,支持窗口缩放,窗口缩放时自动调整, 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。 参考文档: http://www.dowebok.com/demo/2014/77/ 原理:window.onmousewheel = function(){ console.log('ok') }; 使用步骤 引用文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.fullPage.js"></script> <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery

jQuery插件开发全解析

旧城冷巷雨未停 提交于 2020-01-11 02:23:32
这个插件包含三个部分:HTML结构、CSS代码和JS代码。 HTML结构是固定的,结构如下: 1 <!--全屏滚动--> 2 <div class="fullpage-container"> 3 <div class="fullpage-pagebox"> 4 <div id="fullpage-page1" class="fullpage-page-vertical"><h1>1</h1></div> 5 <div id="fullpage-page2" class="fullpage-page-vertical"><h1>2</h1></div> 6 <div id="fullpage-page3" class="fullpage-page-vertical"><h1>3</h1></div> 7 <div id="fullpage-page4" class="fullpage-page-vertical"><h1>4</h1></div> 8 <div id="fullpage-page5" class="fullpage-page-vertical"><h1>5</h1></div> 9 <div id="fullpage-page6" class="fullpage-page-vertical"><h1>6</h1></div> 10 </div> 11 </div>

【原】移动web滑屏框架分享

|▌冷眼眸甩不掉的悲伤 提交于 2020-01-09 00:15:35
本月26号参加 webrebuild 深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考。专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成任务的想法可能会比较多,而想做得更好,需不惜花费时间精力,孜孜不倦,反复改进产品,把99%提高到99.99%,实在是不容易,那么专业,敬业也是少不了的~ 这里也是给自己做个提醒,保持做事的热情和激情,哪怕以后产品发展得不好,对提升自身能力还是很有帮助~ 进入主题,现在很流行在H5页面滑屏的效果,特别是在微信浏览器窗口中,几乎很多推广的活动是使用到上下滑屏,一开始和前端的同事一起合作写滑屏效果花费了很多的时间,而且写出来的页面在浏览器的兼容上踩了很多坑,于是果断采用了框架。 最初接触是使用iscroll4.js的框架,毕竟它是比较成熟的,用起来会让人觉得放心,可惜它在android2.3下滑屏效果兼容性不是很好,另外还有一个缺点是这个框架的有25K,为了一个滑屏的效果加载25K的代码是不划算的~ 后来找了2个比较简单的( 轻量、少bug ),这里推荐给大家,有需要的同学不要错过。 (有些同学会问:为什么不使用左右滑屏呢?原因之一是在微信浏览器中,向右滑动屏幕可能导致用户退出当前页面) 下面给2个上下滑屏的例子~ 实例一, 简单的上下滑屏 实例二,简单的上下滑屏,滑动中附加了动画~

jQuery全屏滚动插件fullPage.js

丶灬走出姿态 提交于 2019-12-21 05:11:20
查看演示和下载的地址: http://www.jq22.com/jquery-info1124 官方网址: http://fullpage.81hu.com/ 下面这个网站就用了fullpage加animate来做的全屏滚动加显示的动画,用bootstarp框架来实现响应式布局。 网址: http://www.xlhd.net 来源: CSDN 作者: dae bal 链接: https://blog.csdn.net/baidu_39043816/article/details/103591594

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

情到浓时终转凉″ 提交于 2019-12-20 12:19:31
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动。 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的。 一、准备工作肯定是要先导入fullpage.js啦; 官网是https://github.com/alvarotrigo/fullPage.js <link rel="stylesheet" href="styles/jquery.fullPage.css"> <script src="scripts/jquery.min.js"></script> <script src="scripts/jquery.fullPage.min.js"></script> fullpage是基于jquery的,所以要记得导入jquery哦。 二、导航栏结构 <ul id="myMenu"> <li data-menuanchor="firstPage" class="menuList"><a href="#firstPage">首页</a></li> <li data-menuanchor="secondPage"class="menuList"><a href="#secondPage">作品</a></li> <li

CSS: change arrows on fullpage JS?

匿名 (未验证) 提交于 2019-12-03 08:48:34
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I am using fullpageJS https://github.com/alvarotrigo/fullPage.js/ to make my website. However when trying to change the arrow style: .controlArrow.prev { left: 50px; background: url(left.png); background-repeat: no-repeat; } .controlArrow.next { right: 50px; } It doesn't work, can anyone explain why? 回答1: Extending @Alvaro's answer, all you need to replace the default border-made arrows by images is as follow: .fp-controlArrow.fp-prev { left: 0; border: none; width: 50px; height: 101px; background: url(left.png) no-repeat; cursor: pointer; }