如果你要制作一个全屏的网页,使用这个插件在合适不过,如QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 jquery.fullPage.css"> 2.引入jq 和 fullpage.js文件 jquery@1.12.4/dist/jquery.min.js"> jquery.fullPage.min.js"> 3.初始化...是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条 scrollOverflow (true/false)内容超过满屏后是否显示滚动条 css3 (true/false) 是否使用.../jquery.easing.1.3'> --> jquery.fullPage.min.js"> <script type="text
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站,github地址。 主要功能有: 支持鼠标滚动。 支持前后退和键盘控制。...2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件,需要依赖jQuery,要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...(); }); 3. fullpage的初始化的设置 在初始化全屏插件的时候,有很多设置项。
jquery fullpage 插件增加头部和版权的方法 前言 一个页面,我们通过 jquery-fullpage 插件来制作,整个是全屏滚动的。...但是,我们希望在最后一页增加一个版权,大概只有 100px 高,而不需要一个全屏来放版权。怎么做呢?搜索了一下,说了各种方法。什么修改源码啦之类的,或者自己写代码判断啦。晕死。...下面,我们简单的说下是怎么实现的 实现其实只需要 html 部分 fullpage"> 这里写头部fullPage.js/blob/master/dist/jquery.fullpage.css 其实关键代码只是下面的而已 .fp-auto-height.fp-section...fullpage github 版权申明:本文由FungLeo原创,允许转载,但转载必须附注首发链接。谢谢。
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大。...它可以应用于任何 Web 元素,包括文字、图像、表格、表单等元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。...-1.9.0.min.js"> jquery.liMarquee.js"> 2、HTML ...jQuery无缝滚动插件liMarquee 3、JavaScript $(function(){ $('.dowebok').liMarquee(); }); 配置 名称 类型 默认值...鼠标悬停滚动 github项目地址:https://github.com/omcg33/jquery.limarquee
注意:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件。...jQuery 插件常用的网站: jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤:...全屏滚动插件 全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。...全屏滚动插件介绍比较详细的网站为: gitHub : https://github.com/alvarotrigo/fullPage.js 中文翻译网站: http://www.dowebok.com/...demo/2014/77/ 代码演示 全屏滚动因为有多重形式,所以不一样的风格html和css也不一样,但是 js 变化不大。
分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。...实现滚屏翻页效果 jquery/1.10.2/jquery.min.js...overflow-y:hidden; _background-image:url(about:blank); _background-attachment:fixed; }/* html加上这段代码用于取消ie6滚动时候元素震动...纵向定位滚屏特效代码,是个人业余兴趣爱好写的,是基于jquery一个特效,没有任何封装,只是提供一种思考方式和实现方法,代码共享可随便使用,可能存在bug,但本人不承担任何修复bug的责任。...= function(){ goTo.each(function(){ $(this).height( $(window).height() ) }); } resetFun(); //屏幕滚动
jQuery 插件 jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。...这些插件也是依赖于jQuery来完成的,所以必须要先引入 jQuery文件,因此也称为 jQuery 插件。 ...全屏滚动插件 全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。...全屏滚动插件介绍比较详细的网站为: http://www.dowebok.com/demo/2014/77/ 代码演示 全屏滚动因为有多重形式,所以不一样的风格html和css也不一样,但是 js...jquery.min.js"> fullpage.min.js"> $(
1. jQuery 插件 jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。...这些插件也是依赖于jQuery来完成的,所以必须要先引入 jQuery文件,因此也称为 jQuery 插件。...jQuery 插件常用的网站: jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤:...全屏滚动插件 全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。...全屏滚动插件介绍比较详细的网站为: http://www.dowebok.com/demo/2014/77/ 代码演示 全屏滚动因为有多重形式,所以不一样的风格html和css也不一样,但是 js 变化不大
jQuery插件的使用 jQuery功能比较有限,想要更复杂的特效效果,可以借助于jQuery插件完成。...注意:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件 JQuery插件常用的网站: 1.jQuery插件库 jQuery插件库-收集最全最新最好的jQuery插件 jQuery...之家 jQuery之家-自由分享jQuery、html5、css3的插件库 插件使用步骤: 1.引入相关文件。...3、全屏滚动案例(隐藏侧边滚动条,页面以一帧一帧的方式去展现) gilHub : https://github.corn/alvarotrigoffullPage.js 中文翻译网站:jQuery全屏滚动插件...fullPage.js演示_dowebok
360浏览器 fullpage的使用 fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。...参考文档 http://www.dowebok.com/77.html 下载地址 https://github.com/alvarotrigo/fullPage.js 基本使用 引入jQuery文件,因为...fullpage是jquery插件 引入fullpage的js文件 页面结构 编写js代码 jquery.easing.js css3 是否使用css3 transform来实现滚动效果,默认true,不用修改,CSS3的动画效率比较js高。...autoScrolling 是否使用插件的滚动方式,默认true,如果选择false,会出现浏览器子代的滚动条,将不会按页滚动,按照滚动进行滚动。
正屏滚动的需求 ? ? ? ? ? 编写通过滚轮上下切换这五个屏幕效果。 要做出这个效果,其实不用说,首先要把这五个div的基本HTML+CSS给写出来先。 准备好五个图片 ? 001.png ?... jquery.../jquery-3.3.1.min.js"> jquery-mousewheel/jquery.mousewheel.min.js...len}); $('.pages_warper_inner .page').css({'height':$height}); // 用于函数节流:降低滚动触发修改...siblings().removeClass('active'); $nowIndex = $(this).index(); // 滚动向上向下的动画效果
Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js — web 语法高亮 Chart.js — 使用 JavaScript...插件 Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片的可视化 diff 工具 Vivus.js — 在 SVG 上绘制动画 Wow.js — 滚动时展现动画 Scrolline.js...Dragdealer.js — 炫酷拖拽 Bounce.js — 创建炫酷的 CSS3 动画 Pagepiling.js — 全屏滚动 Multiscroll.js — 两列垂直反向滚动 Favico.js...Shepherd.js — 为应用创建新手引导 Tooltip — tooltip 提示框 Select2 — Jquery 选择框插件 IziToast — 通知弹窗实现 IziModal — 模态框实现
Three.js: https://threejs.org/ 其他库 · KINETIC:http://kineticjs.com/ · Particles.js--web中创建炫酷的浮动粒子的库: · Fullpage.js...—快速实现全屏滚动特性: · Highlight.js—web 语法高亮: · Waypoints.js—滚动到某个元素位置时触发一个功能: · Typed.js—打字机效果: · Chart.js—使用...插件 · Barba.js—流式页面过渡 · TwentyTwenty—一个对比图片的可视化 diff 工具 · Vivus.js—在 SVG 上绘制动画 · Wow.js—滚动时展现动画 · Scrolline.js...· Dragdealer.js—炫酷拖拽 · Bounce.js—创建炫酷的 CSS3 动画 · Pagepiling.js—全屏滚动 · Multiscroll.js—两列垂直反向滚动 · Favico.js...· Shepherd.js—为应用创建新手引导 · Tooltip—tooltip 提示框 · Select2—Jquery 选择框插件 · IziToast—通知弹窗实现 · IziModal—模态框实现
jQuery 插件 jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。...这些插件也是依赖于jQuery来完成的,所以必须要先引入 jQuery文件,因此也称为 jQuery 插件。...全屏滚动插件 全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。...全屏滚动插件介绍比较详细的网站为:http://www.dowebok.com/demo/2014/77/ 代码演示 全屏滚动因为有多重形式,所以不一样的风格html和css也不一样,但是 js 变化不大...jquery.min.js"> fullpage.min.js"> $(
这是前端社区中非常著名的 JavaScript 组件,能快速给网站加上全屏幻灯片的展示效果。 ?...03、fullPage.js 的诞生过程 早期作者要做拥有一个全屏幻灯片效果的网站,但是在网上搜索一番后,发现找不到相关代码示例,于是便打算自己动手实现。...没多久,网站完成了,作者又将这个功能从网站中抽离出来,做成了 jQuery 插件,以方便其他开发者集成使用。...当他将 jQuery 插件抽离出来之后,又将这份代码发布到了 GitHub,并简单做了下推广宣传。...随着代码的迭代更新,插件功能也愈加完善,起初的 jQuery 插件也被重构成独立的 JavaScript 组件,并支持 Vue.js, React.js 和 Anugular 框架扩展,目前 WordPress
前言 如果你是一名前端工程师,那么你一定对 fullPage.js 这个开源项目不会感到陌生。这是前端社区中非常著名的 JavaScript 组件,能快速给网站加上全屏幻灯片的展示效果。 ?...fullPage.js 的诞生过程 早期作者要做拥有一个全屏幻灯片效果的网站,但是在网上搜索一番后,发现找不到相关代码示例,于是便打算自己动手实现。...没多久,网站完成了,作者又将这个功能从网站中抽离出来,做成了 jQuery 插件,以方便其他开发者集成使用。...当他将 jQuery 插件抽离出来之后,又将这份代码发布到了 GitHub,并简单做了下推广宣传。...随着代码的迭代更新,插件功能也愈加完善,起初的 jQuery 插件也被重构成独立的 JavaScript 组件,并支持 Vue.js, React.js 和 Anugular 框架扩展,目前 WordPress
这些插件也是依赖于jQuery来完成的,所以必须要先引入 jQuery文件,因此也称为 jQuery 插件。 ...jQuery 插件常用的网站: jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤: 引入相关文件...全屏滚动插件 全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。...全屏滚动插件介绍比较详细的网站为: http://www.dowebok.com/demo/2014/77/ 代码演示 全屏滚动因为有多重形式,所以不一样的风格html和css也不一样,但是 js...jquery.min.js"> fullpage.min.js"> $(function
有些动画是页面一加载就要的,还有一些动画是需要页面滚动到那个元素才要展示的。 本文以模板之家的 “全屏Story日记本个人主页自适应模板”为例,解析这两种动画实现的方式之一。...当滚动到该元素时,去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件 二、使用方法 要使用这个...jQuery插件,需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。..." src="js/jquery.scrollex.js"> 调用插件 在页面DOM元素加载完毕之后,你可以通过scrollex()方法来初始化插件。...插件的github地址为:https://github.com/n33/jquery.scrollex
这是前端社区中非常著名的 JavaScript 组件,能快速给网站加上全屏幻灯片的展示效果。...02 — fullPage.js 的诞生过程 早期作者要做拥有一个全屏幻灯片效果的网站,但是在网上搜索一番后,发现找不到相关代码示例,于是便打算自己动手实现。...没多久,网站完成了,作者又将这个功能从网站中抽离出来,做成了 jQuery 插件,以方便其他开发者集成使用。...当他将 jQuery 插件抽离出来之后,又将这份代码发布到了 GitHub,并简单做了下推广宣传。...随着代码的迭代更新,插件功能也愈加完善,起初的 jQuery 插件也被重构成独立的 JavaScript 组件,并支持 Vue.js, React.js 和 Anugular 框架扩展,目前 WordPress