jQuery全屏滚动插件fullPage

最新推荐文章于 2020-07-09 17:13:35 发布
最新推荐文章于 2020-07-09 17:13:35 发布
阅读量70 收藏
点赞数
原文链接：https://my.oschina.net/u/1994482/blog/401896
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>fullPage.js — 背景演示_dowebok</title> 
<link rel="stylesheet" href="css/jquery.fullPage.css"> 
<style> 
.section1 { background: url(images/1.jpg) 50%;} 
.section2 { background: url(images/2.jpg) 50%;} 
.section3 { background: url(images/3.jpg) 50%;} 
.section4 { background: url(images/4.jpg) 50%;} 
</style> 
<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery-ui-1.10.3.min.js"></script> 
<script src="js/jquery.fullPage.min.js"></script> 
<script> 
$(document).ready(function() { 
$.fn.fullpage({ 
anchors: ['page1', 'page2', 'page3', 'page4'] 
}); 
}); 
</script> 
</head> 
<body> 
<div class="section section1"></div> 
<div class="section section2"></div> 
<div class="section section3"></div> 
<div class="section section4"></div> 
<a href="http://www.dowebok.com/" style="display: none;">dowebok</a> 
<a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滚动插件fullPage.js</a> 
</body> 
</html>
<a href="http://www.dowebok.com/" style="display: none;">dowebok</a> 
<a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滚动插件fullPage.js</a> 
</body> 
</html>



<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>fullPage.js — 循环演示_dowebok</title> 
<link rel="stylesheet" href="css/jquery.fullPage.css"> 
<style> 
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 
</style> 
<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery-ui-1.10.3.min.js"></script> 
<script src="js/jquery.fullPage.min.js"></script> 
<script> 
$(document).ready(function() { 
$.fn.fullpage({ 
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], 
anchors: ['page1', 'page2', 'page3', 'page4'], 
loopBottom: true 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<h3>第一屏</h3> 
<p>fullPage.js — 循环演示</p> 
</div> 
<div> 
<h3>第二屏</h3> 
</div> 
<div> 
<h3>第三屏</h3> 
</div> 
<div> 
<h3>第四屏</h3> 
<p>这是最后一屏了，继续往下滚返回第一屏</p> 
</div> 
<a href="http://www.dowebok.com/" style="display: none;">dowebok</a> 
<a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滚动插件fullPage.js</a> 
</body> 
</html>

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>fullPage.js — 回调函数演示_dowebok</title> 
<link rel="stylesheet" href="css/jquery.fullPage.css"> 
<style> 
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 
.section2 p { position: relative; left: -120%;} 
.section3 p { position: relative; bottom: -120%;} 
.section4 p { display: none;} 
</style> 
<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery-ui-1.10.3.min.js"></script> 
<script src="js/jquery.fullPage.min.js"></script> 
<script> 
$(document).ready(function() { 
$.fn.fullpage({ 
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90', '#ef820'], 
anchors: ['page1', 'page2', 'page3', 'page4', 'page5'], 
afterLoad: function(anchorLink, index){ 
if(index == 2){ 
$('.section2').find('p').delay(500).animate({ 
left: '0' 
}, 1500, 'easeOutExpo'); } 
if(index == 3){ 
$('.section3').find('p').delay(500).animate({ 
bottom: '0' 
}, 1500, 'easeOutExpo'); } 
if(index == 4){ 
$('.section4').find('p').fadeIn(2000); 
} }, 
onLeave: function(index, direction){ 
if(index == '2'){ 
$('.section2').find('p').delay(500).animate({ 
left: '-120%' 
}, 1500, 'easeOutExpo'); } 
if(index == '3'){ 
$('.section3').find('p').delay(500).animate({ 
bottom: '-120%' 
}, 1500, 'easeOutExpo'); } 
if(index == '4'){ 
$('.section4').find('p').fadeOut(2000); 
} } }); }); 
</script> 
</head> 
<body> 
<div class="section section1"> 
<h3>第一屏</h3> 
<p>fullPage.js — 回调函数演示</p> 
</div> 
<div class="section section2"> 
<h3>第二屏</h3> 
<p>滚动到第二屏后的回调函数执行的效果</p> 
</div> 
<div class="section section3"> 
<h3>第三屏</h3> 
<p>滚动到第三屏后的回调函数执行的效果</p> 
</div> 
<div class="section section4"> 
<h3>第四屏</h3> 
<p>滚动到第四屏后的回调函数执行的效果</p> 
</div> 
<a href="http://www.dowebok.com/" style="display: none;">dowebok</a> 
<a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滚动插件fullPage.js</a> 
</body> </html>


/** 
* fullPage 1.4.5 
* https://github.com/alvarotrigo/fullPage.js
* MIT licensed 
* 
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo 
*/ 
html, body { 
margin: 0; 
padding: 0; 
} 
#superContainer { 
height: 100%; 
position: relative; 
} 
.section { 
position: relative; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
.slide { 
float: left; 
} 
.slide, .slidesContainer { 
height: 100%; 
display: block; 
} 
.slides { 
height: 100%; 
overflow: hidden; 
position: relative; 
-webkit-transition: all 0.3s ease-out; 
-moz-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
} 
.section.table, .slide.table { 
display: table; 
width: 100%; 
} 
.tableCell { 
display: table-cell; 
vertical-align: middle; 
width: 100%; 
height: 100%; 
} 
.slidesContainer { 
float: left; 
position: relative; 
} 
.controlArrow { 
position: absolute; 
top: 50%; 
cursor: pointer; 
width: 0; 
height: 0; 
border-style: solid; 
margin-top: -38px; 
} 
.controlArrow.prev { 
left: 15px; 
width: 0; 
border-width: 38.5px 34px 38.5px 0; 
border-color: transparent #fff transparent transparent; 
} 
.controlArrow.next { 
right: 15px; 
border-width: 38.5px 0 38.5px 34px; 
border-color: transparent transparent transparent #fff; 
} 
.scrollable { 
overflow: scroll; 
} 
.easing { 
-webkit-transition: all 0.7s ease-out; 
-moz-transition: all 0.7s ease-out; 
-o-transition: all 0.7s ease-out; 
transition: all 0.7s ease-out; 
} 
#fullPage-nav { 
position: fixed; 
z-index: 100; 
margin-top: -32px; 
top: 50%; 
opacity: 1; 
} 
#fullPage-nav.right { 
right: 17px; 
} 
#fullPage-nav.left { 
left: 17px; 
} 
.fullPage-slidesNav { 
position: absolute; 
z-index: 4; 
left: 50%; 
opacity: 1; 
} 
.fullPage-slidesNav.bottom { 
bottom: 17px; 
} 
.fullPage-slidesNav.top { 
top: 17px; 
} 
#fullPage-nav ul, 
.fullPage-slidesNav ul { 
margin: 0; 
padding: 0; 
} 
#fullPage-nav li, 
.fullPage-slidesNav li { 
display: block; 
width: 14px; 
height: 13px; 
margin: 7px; 
position:relative; 
} 
.fullPage-slidesNav li { 
display: inline-block; 
} 
#fullPage-nav li a, 
.fullPage-slidesNav li a { 
display: block; 
position: relative; 
z-index: 1; 
width: 100%; 
height: 100%; 
cursor: pointer; 
text-decoration: none; 
} 
#fullPage-nav li .active span, 
.fullPage-slidesNav .active span { 
background: #333; 
} 
#fullPage-nav span, 
.fullPage-slidesNav span { 
top: 2px; 
left: 2px; 
width: 8px; 
height: 8px; 
border: 1px solid #000; 
background: rgba(0, 0, 0, 0); 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
border-radius: 50%; 
position: absolute; 
z-index: 1; 
} 
.fullPage-tooltip { 
position: absolute; 
color: #fff; 
font-size: 14px; 
font-family: arial, helvetica, sans-serif; 
top: -2px; 
} 
.fullPage-tooltip.right { 
right: 20px; 
} 
.fullPage-tooltip.left { 
left: 20px; 
} 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>fullPage.js — 绑定菜单演示_dowebok</title> 
<link rel="stylesheet" href="css/jquery.fullPage.css"> 
<style> 
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;} 
#menu li { float: left; margin: 0 10px 0 0; font-size: 14px;} 
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;} 
#menu .active a { color: #fff; background-color: #333;} 
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 
</style> 
<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery-ui-1.10.3.min.js"></script> 
<script src="js/jquery.fullPage.min.js"></script> 
<script> 
$(document).ready(function() { 
$.fn.fullpage({ 
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], 
anchors: ['page1', 'page2', 'page3', 'page4'], 
menu: '#menu' 
}); 
}); 
</script> 
</head> 

<body> 

<ul id="menu"> 
<li data-menuanchor="page1"><a href="#page1">第一屏</a></li> 
<li data-menuanchor="page2"><a href="#page2">第二屏</a></li> 
<li data-menuanchor="page3"><a href="#page3">第三屏</a></li> 
<li data-menuanchor="page4"><a href="#page4">第四屏</a></li> 
</ul> 

<div> 
<h3>第一屏</h3> 
<p>fullPage.js — 绑定菜单演示</p> 
</div> 
<div> 
<h3>第二屏</h3> 
<p>请查看左上角，点击可以控制</p> 
</div> 
<div> 
<h3>第三屏</h3> 
<p>绑定的菜单没有默认的样式，你需要自行编写</p> 
</div> 
<div> 
<h3>第四屏</h3> 
<p>这是最后一屏</p> 
</div> 
<a href="http://www.dowebok.com/" style="display: none;">dowebok</a> 
<a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滚动插件fullPage.js</a> 
</body> 
</html>


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>fullPage.js — 项目导航演示_dowebok</title> 
<link rel="stylesheet" href="css/jquery.fullPage.css"> 
<style> 
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 
</style> 
<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery-ui-1.10.3.min.js"></script> 
<script src="js/jquery.fullPage.min.js"></script> 
<script> 
$(document).ready(function() { 
$.fn.fullpage({ 
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], 
anchors: ['page1', 'page2', 'page3', 'page4'], 
navigation: true 
}); 
}); 
</script> 
</head> 

<body> 

<div> 
<h3>第一屏</h3> 
<p>fullPage.js — 项目导航演示</p> 
</div> 
<div> 
<h3>第二屏</h3> 
<p>请查看右边的圆圈</p> 
</div> 
<div> 
<h3>第三屏</h3> 
<p>圆圈还可以设置位置，颜色，加上 tip，点击可以控制</p> 
</div> 
<div> 
<h3>第四屏</h3> 
<p>这是最后一屏</p> 
</div> 
<a href="http://www.dowebok.com/" style="display: none;">dowebok</a> 
<a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滚动插件fullPage.js</a> 

</body> 
</html>

转载于:https://my.oschina.net/u/1994482/blog/401896

weixin_34284188
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery全屏滚动插件fullPage使用
xiaoxiaoyoumeng的博客
07-16 328
1. 引入jquery.js和jquery.fullPage.min.js &lt;script src="jquery.min.js"&gt;&lt;/script&gt; &lt;script src="chajian/jquery.fullPage.min.js"&gt;&lt;/script&gt; 2. 书写html &lt;div id="dowebok"
jQuery全屏滚动插件fullPage.js
阳光下的冷静的博客
03-26 1333
简介 我们通常会看到一些全屏网站，特别是一些国外网站。这些网站有一个共同的特点，那就是每个页面用一个很大的图片或者色块做背景，再添加一些简单的内容，这样看起来显得高大上。这些全屏效果都是由jQuery的全屏滚动插件fullPage.js做成的。 fullPage.js是一个基于jQuery的插件，它能够很方便，很轻松的制作出全屏网站。fullPage.js主要有以下几种功能： 支持鼠标滚动 支持...
FullPage插件
whitegiveking的博客
04-29 195
FullPage插件-插件功能介绍： 基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。 支持鼠标滚动，支持前进后退和键盘控制，多个回调函数，支持手机、平板触摸事件，支持 CSS3 动画，支持窗口缩放，窗口缩放时自动调整，可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。 $.fn.fullpage.moveSectionUp();//...
jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
weixin_30764137的博客
03-08 127
jQuery-全屏滚动插件fullPage.js使用方法总结 　　作者github及下载地址:https://github.com/alvarotrigo/fullPage.js　 　今天说下jQuery的一款插件fullpage.js,可以实现全屏滚动，非常流行的效果，兼容性IE8+ 还算不错，使用网站有小米，等电子产品、汽车全屏滚动展示，看起来比较高大上，接下来我全面解析下此款插件！附我做...
jQuery滚屏插件XSwitch.js
weixin_30693183的博客
02-27 179
1、需要有基本的HTML结构 <div style="margin-top: 124px;" id="container" data-XSwitch> <div class="sections"> <div class="main_about_product common_height section" ></div&gt...
jQuery全屏滚动插件fullPage.js示例源码.rar
09-02
**jQuery全屏滚动插件fullPage.js详解** 全屏滚动效果在现代网页设计中非常流行，它可以为用户提供独特的浏览体验，使网站更具视觉吸引力。fullPage.js是一款强大的jQuery插件，专为实现全屏滚动效果而设计。它不仅...
jQuery全屏滚动插件fullPage.js演示.zip
04-14
"jQuery全屏滚动插件fullPage.js演示"的压缩包很可能包含了完整的示例代码和说明文档，帮助开发者快速理解和应用fullPage.js。这些资源对于初学者来说尤其宝贵，他们可以通过查看和修改示例代码来学习如何配置和...
jQuery全屏滚动插件fullPage.js演示
07-19
全屏滚动插件fullPage.js是一款广泛应用于网页设计中的JavaScript库，它允许开发者轻松创建具有全屏滚动效果的网站。这种效果通常被称为“单页应用”或“全屏滚动导航”，能够提供一种流畅且引人入胜的用户体验，让...
功能强大的滚动播放插件JQ-Slide
xiaozhen0610的博客
07-09 1558
查看效果：http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大，滚动方式自由多样全部滚动方式方式一方式二方式三方式四方式五方式六 JQ-Slide插件参数说明表 参数名 参数值(默认值可以省略) effect scroolY（默认）：垂直滚动 scroolX：水平滚动 scroolTxt：文本垂直滚动 fade：淡出 scroolLoop：水平左右点击滚动 autoPlay true（默认）： or false spe...
jQuery fullpage全屏的步骤及注意事项
summer_my_sunshine的博客
09-20 1395
想要实现fullpage全屏滚动，需要以下几步： 第一步：引入样式文件以及js文件 我自己写的style样式表为*{ margin:0; padding:0;} ol, ul { list-style:none; } a { text-decoration:none;color: #000; } a:hover {} img{border:0;display: block;}
jQuery中$.fn的用法
zf900901298的专栏
11-05 1346
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子：$("#div").abc(); jQuery为开发插件提拱了两个方法，分别是： jQuery.extend(obje
Fullpage.js导航颜色无法更改解决方法(navigationColor无效)
桐小目的秘密基地
09-03 7032
Fullpage.js全屏滚动插件是一个非常实用非常高端大气上档次的一个插件，用起来感觉确实很棒~在这里先谢过开发者。     具体Fullpage.js的介绍、演示和使用方法网上到处都有，在这里给还没用过的朋友放两个链接。     fullpage.js官网 http://alvarotrigo.com/fullPage/     API文档 http://www.dowebok.com/
matlab下载.pdf
07-14
matlab下载下载方式及注意事项
Android系统原理及开发要点详解-从入门到精通
07-13
Android系统原理及开发要点详解 Java4 Android视频教程 Android开发视频教学 从入门到精通 Android的软件管理器的开发教程视频 Android深入浅出_Android高端课程分享试听 JavaWeb Android系统的手机防盗软件的实现 Android开发入门与实战随书视频 视频列表.txt 0.0MB 开发入门与实战代码.rar 6.1MB 第9章 我来“广播”你的“意图”——Intent和Broadcast面对面.wmv 15.1MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-2.wmv 0.6MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-1.wmv 24.3MB 第8章 移动信息仓库——Android的数据存储操作之Android数据存储概述.wmv 57.7MB 第7章 良好的学习开端——Android基本组件介绍之友好地互动交流——对话框(Dialog)介绍与实例-2.wmv 7.
GESP等级认证 2024年6月 C++一级真题
最新发布
07-14
GESP等级认证 2024年6月 C++一级真题 从官网上刚刚下载下来的,题都是热乎的,这可是最新真题 大家看一看瞧一瞧,走过路过不要错过,免费下载,全篇无水印,不好用随便吐槽我! 涵盖选择题,判断题,编程题,基础知识多,满满的干货,非常建议下载!!!!! 萌新小白来做做题,复习巩固都很合适!
vue3实现全屏滚动效果
04-03
Vue 3是一种流行的JavaScript框架，用于构建用户界面。要实现全屏滚动效果，可以使用Vue 3结合一些插件或库来实现。以下是一种常见的实现方式： 1. 安装Vue 3：首先，确保你已经安装了Vue 3。你可以通过npm或yarn来安装Vue 3。 2. 使用Vue Router：Vue Router是Vue官方提供的路由管理器。你可以使用Vue Router来实现页面之间的切换和导航。安装并配置Vue Router。 3. 使用fullPage.js插件：fullPage.js是一个流行的全屏滚动插件，它可以帮助你实现全屏滚动效果。你可以通过npm或yarn来安装fullPage.js。 4. 创建全屏滚动组件：在Vue 3中，你可以创建一个全屏滚动组件，该组件包含多个子组件，每个子组件代表一个滚动页面。在该组件中，你可以使用fullPage.js提供的API来初始化和配置全屏滚动效果。 5. 使用动画库：如果你想要在滚动页面之间添加过渡效果或动画效果，你可以使用一些动画库，如Animate.css或Vue Transition。 6. 配置路由和导航：使用Vue Router来配置路由和导航，以便用户可以通过导航链接或滚动页面来切换到不同的页面。 这只是一种实现全屏滚动效果的方式，你还可以尝试其他插件或库来实现类似的效果。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值