前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >fullPage.js全屏滚动插件

fullPage.js全屏滚动插件

作者头像
切图仔
发布于 2022-09-08 07:17:07
发布于 2022-09-08 07:17:07
15.9K00
代码可运行
举报
文章被收录于专栏:生如夏花绚烂生如夏花绚烂
运行总次数:0
代码可运行

如果你要制作一个全屏的网页,使用这个插件在合适不过,如QQ浏览器官方网站

直接下载

使用方法

1.引入fullpage.css文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">

2.引入jq 和 fullpage.js文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

3.初始化

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//html
<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        第三屏幕
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>
//js
 $('#fullpage').fullpage({
        navigation:true,//显示导航
        navigationPosition:'right',
        //导航显示右边
        controlArrowColor:'red',//左右滑块背景颜色
    });

4.参数设置 传递对象形式

参数

说明

resize

(true/false)字体是否随着窗口缩放而缩放

slidesColor

设置背景颜色

anchors

(array)定义锚链接

scrollingSpeed

(int) 设置滚动速度,单位为毫秒

easing

(striing)滚动动画方式

menu

(true/false) 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动

navigation

(true/false)是否显示项目导航

navigationPosition

(string) 项目导航的位置,可选 left 或 right

navigationColor

(string)项目导航的颜色

navigationTooltips

(array)项目导航的 tip

slidesNavigation

(true/false) 是否显示左右滑块的项目导航

slidesNavPosition

(string)左右滑块的项目导航的位置,可选 top 或 bottom

controlArrowColor

(string) 左右滑块的箭头的背景颜色

loopBottom

(true/false)滚动到最底部后是否滚回顶部

loopTop

(true/false)滚动到最顶部后是否滚底部

loopHorizontal

(true/false)左右滑块是否循环滑动

autoScrolling

(true/false) 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条

scrollOverflow

(true/false)内容超过满屏后是否显示滚动条

css3

(true/false) 是否使用 CSS3 transforms 滚动

paddingTop

string() 与顶部的距离

paddingBottom

string() 与底部距离

keyboardScrolling

(true/false) 是否使用键盘方向键导航

continuousVertical

(true/false)是否循环滚动,与 loopTop 及 loopBottom 不兼容

5.常用方法

--

--

moveSectionUp()

向上滚动

moveSectionDown()

向下滚动

moveTo(section, slide)

滚动到

moveSlideRight()

slide 向右滚动

moveSlideLeft()

slide 向左滚动

setAutoScrolling()

设置页面滚动方式,设置为 true 时自动滚动

setAllowScrolling()

添加或删除鼠标滚轮/触控板控制

setKeyboardScrolling()

添加或删除键盘方向键控制

setScrollingSpeed()

定义以毫秒为单位的滚动速度

6.回调函数

--

--

afterLoad ()

滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 为序号,从1开始计算

onLeave()

滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;nextIndex 是滚动到的“页面”的序号,从1开始计算;direction 判断往上滚动还是往下滚动,值是 up 或 down。

afterRender

页面结构生成后的回调函数,或者说页面初始化完成后的回调函数

afterSlideLoad

滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数

onSlideLeave

某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数

7.demo

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #fullpage  .section{
            width:100%;
            height:400px;
            background: skyblue;
            margin:30px 0;
        }
        .section .slide{
            width: 200px;
            height:200px;
            margin:0 auto;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        第三屏幕
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- <script type="text/javascript" src='../jquery.easing.1.3'></script> -->
<script src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
    $(function(){
    $('#fullpage').fullpage({
        navigation:true,//显示导航
        navigationPosition:'right',
        //导航显示右边
        controlArrowColor:'red',//左右滑块背景颜色
    });

});
</script>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
最近喜欢的几个电子设备
这是一款我用了好几年的鼠标,质量还是相当的不错的。我觉得用于mac系统是最舒服的状态。侧边两个按钮可以切换mac中的屏幕,非常的方便。
Python进击者
2023/03/15
5130
最近喜欢的几个电子设备
小米MIX2正式发布——正面几乎全是屏幕
小米MIX2【全面屏引导者】 小米MIX2是小米手机还未发布的小米MIX第二代手机。配置是6.4英寸屏幕,骁龙835处理器,支持指纹解锁,运行内存是4g到8g,储存空间128g或者256g。 搭载高通
神无月
2018/06/25
7910
聊聊身边的嵌入式:点菜机用着好好的,突然挂了,这口锅应该甩给谁?
周末被老婆challenge了。之所以用这个英文词汇,是因为实在难以找出一个恰当的中文,来表达这个意思。挑战?盘问,质疑?臭骂?好像都不对劲儿。对了,想来想去,只有diao这个词有点儿接近,又实在是难登大雅之堂。语言真是个奇怪的东西。
用户2366192
2023/09/14
1810
聊聊身边的嵌入式:点菜机用着好好的,突然挂了,这口锅应该甩给谁?
聊聊身边的嵌入式:价格不菲的护眼灯,是眼睛保护神还是智商税?
神兽归笼这个词,不知道哪位大师发明的,充分表达了广大家长望子成龙,却又忧心忡忡,寝食难安的心情。让家长们焦虑的,不只是孩子的学习,还有健康。就拿视力来说,一份官方的报告,看了也是让人心中一惊。近视率从小学的35.6%,到初中的71.1%,再到到高中的80.5%,一路攀高,估计到大学生,就更没法看了。
用户2366192
2023/03/06
4920
聊聊身边的嵌入式:价格不菲的护眼灯,是眼睛保护神还是智商税?
800元打造物理分辨率2K投影仪全攻略
看了前辈们的XXX元打造N核服务器的帖子,我前段时间一直想在租房里也能够看大屏电影就好了,然鹅一个正儿八经的投影仪也忒TN的贵了,物理分辨率1080p的,至少得5k+,而且要是灯泡坏了或者主控板坏了,修一下也得上千,实在不是屌丝搞得起的。正好重新回忆起FB的口号: 秉着捡垃圾的原则,开始了DIY投影仪的旅程。 这其中研究原理和各种配件的优劣性耗费了大量的时间,资料及其少,基本很少有人愿意把原理和优劣对比做细致分析和总结,本文的内容耗费了作者接近一个月的业余时间去收集整理。在此分享给大家,并希望大家去做出改进
FB客服
2018/02/24
1.9K0
800元打造物理分辨率2K投影仪全攻略
程序员,就要有一套自己的终极装备
我们程序员工作,敲代码如同搬砖,如果你有好的开发工具,优秀的 IDE ,有好的代码管理工具,高效率的协同办公软件,都可以使我们搬砖的速度和质量有大幅度的提高,就像使用了传送带一样,轻松的敲代码。这就是我说的内在的工具利器,就是要学会寻找和使用「软」设备。
非著名程序员
2018/07/30
4.9K0
程序员,就要有一套自己的终极装备
小米手机自拍图标-小米Civi 1S体验:这次,男生也能自拍美颜了
  2021年9月27日,小米发布了一部最“特别”的小米手机——小米Civi,为何这么说小米手机自拍图标,这是小米第一台真正意义上面向女性市场的手机。之前虽说小米也推出过小米Note女神版、小米CC系列,但均反响平平。毕竟当时小米还是第一次尝试女性用机,经验自然不如OPPO和vivo这两位老大哥,销量惨淡也是情理之中。
宜轩
2022/12/26
5040
AI一分钟 | “钢铁侠”马斯克冒冷汗直面跳票尴尬;Apollo2.0确定下个月初出征美国,李彦宏发力全球梦
一分钟AI 马斯克Twitter例行明体察民情,尴尬地请大家继续等待Autopilot 2.0,和升级的Linux OS系统。 Apollo2.0将揭开面纱!百度组建Apollo自动驾驶“国家队”出征美国第51届国际消费电子展(CES)。 联发科宣布在2018年发布两款新的Helio P系列芯片,具有人脸识别功能和先进制程,OPPO R13或首发。 微软加入小米生态链,将于1月31日推出仅售价199元的Yeelight语音助手,同时搭载小米小爱和微软小冰。 苹果今年业绩下滑严重,但是CEO库克年终奖增长
AI科技大本营
2018/04/27
8600
AI一分钟 | “钢铁侠”马斯克冒冷汗直面跳票尴尬;Apollo2.0确定下个月初出征美国,李彦宏发力全球梦
“剪去线缆”的VR纷纷选择一体化,为何AR眼镜却大多选择分体式设计?
随着技术的发展和人们切实的需求,VR/AR设备均朝着轻便化的方向发展,但两者之间的发展道路却出现了一些差异。不久前的OC6大会上,Oculus推出的VR一体机Quest几乎成了大会的主角(有关OC6大会的详细内容,可参看《OC6大会|Oculus Quest占据C位,Oculus商店销售额已突破1亿》,感兴趣的读者可自行点击蓝字进行阅读)。此外,国内大朋、Pico、爱奇艺等厂商在VR一体机方面也有着不错的发展。
VRPinea
2019/12/30
1.5K0
小米Civi的女性突围战
手机赛道的竞争已经进入白热化阶段,如何在同质化的问题下提高手机销量,成了手机厂商们的心病,而小米再一次找到了自身的增量空间。
金融外参
2021/10/11
4820
kibana常用语法备份
# 分词器 GET _analyze { "analyzer":"ik_smart", "text":"中国地图" } # 分词器 GET _analyze { "analyzer":"ik_max_word", "text":"中国地图" } # 删除索引结构 DELETE goodsdata # 添加索引结构 PUT goodsdata { "mappings":{ "properties": { "goodsId":{ "type":"text"
西柚dzh
2022/06/09
3100
捡垃圾系列-mpos机12864屏幕
回收了一批mpos机,想拆12864屏幕。在没有数据手册的情况下,有点困难。白天的时候下单了逻辑分析仪,打算有时间分析下,毕竟12864屏幕比彩屏要好分析的多。
羽翰尘
2020/05/07
1.1K0
捡垃圾系列-mpos机12864屏幕
一文看尽小米发布会:小米8售价2699元,而且还有透明版!
小米竟然一口气发布了7款新品。 今天下午两点,小米新品发布会在深圳拉开帷幕。 “有人问我,你们为什么在深圳开发布会?我说友商在这里。”发布会一开场,雷军就开了个玩笑。可以看出,雷军胖了,但是很高兴。 近3个小时的发布会,新品多多,应接不暇。具体什么情况,镁客网带你一文打尽。 小米8周年代表作 备货几十万台 “我是小米8,我为8周年代表作而奋斗。” 这是小米8的宣传口号。 刘海屏 作为一款全面屏手机,小米同样因解决不了技术问题,为小米8配置了一个屏占比达86.68%“刘海屏”。唯一与其他同类手机不同的是,小米
镁客网
2018/06/05
7600
晋升高品格网站,其实仅仅只需要一张图
无论是做官网、官方公众号、微博等,或是不定期的组织一些专题活动,头图、大图都承担着提升品牌形象的责任,为了最大可能地留住用户,无论是官网头图、封面小图,微博焦点图,还是专题头图,活动海报,都成为抓住用户视觉、留住用户的重要“门面”。
友好速搭小编
2018/08/06
4670
晋升高品格网站,其实仅仅只需要一张图
量子点技术最新进展:色彩鲜艳且可防蓝光
目前我们接收信息的硬件,无外乎手机电视Pad等,这些无一不需要显示屏的助力。目前市面上被使用最多的屏幕有两种,分别是OLED 屏幕与LCD屏幕。不过,在色彩显示方面,已经有更优秀的技术出现,那就是量子点技术(Quantum Dots),对应量子点屏幕,即QLED屏幕。
镁客网
2020/09/22
1.5K0
量子点技术最新进展:色彩鲜艳且可防蓝光
业界 | 投身金融,展示唱功:走向「三次元」的微软小冰
「今天发布会并没有像以往那样,是在微软研究院里举行的。这不是因为我们自信心膨胀了,而是因为今天的小冰版本有太多需要介绍的新特点。」王永东在发布会开场说道。
机器之心
2018/07/30
6400
业界 | 投身金融,展示唱功:走向「三次元」的微软小冰
开心电视助手工具(机顶盒、电视机专用的调试神器工具)
目前大多数电视机并没有给太多权限功能,例如自带的一些应用你正常无法卸载掉,甚至还有一些电视机不允许安装第三方 APK 应用,逼你只能用电视自带的视频播放应用。
季春二九
2023/03/22
76.9K1
开心电视助手工具(机顶盒、电视机专用的调试神器工具)
安全帽智能识别系统
安全帽智能识别系统可以全自动检测和分析监控画面范畴内的施工作业人员的安全帽的佩戴情况,针对未佩戴帽子规范的不安全行为,安全帽智能识别系统可以即时监控和向发送抓拍图片进行预警。PC手机客户端可以显示警示视频信息和屏幕截屏,施工作业现场可以放置音箱和扬声器进行实时警示。依据用户的选择,警示信息内容还可以推送给有关作业管理人员,协助施工作业人员开展安全生产管理。
燧机科技
2022/09/08
4430
安全帽智能识别系统
Sony 全画幅微单狗头推荐
动了凡心了,想买全画幅了,目前想入坑Sony,选中的机器有Sony A7(一代),Sony A7M2K,Sony A7R1,还有Sony A7S,以及Sony A7R2.
云深无际
2023/02/27
1.8K0
Sony 全画幅微单狗头推荐
小米核心技术首次全员亮相,AIoT、5G双管齐下,赢市场靠生态
在社交平台上永不疲惫的雷军,可以说是劳模典范,永远冲在新产品发布会的第一线,昨天还在为金山办公科创板上市敲钟,今天早上已经现身小米的开发者大会。
镁客网
2019/11/28
6170
小米核心技术首次全员亮相,AIoT、5G双管齐下,赢市场靠生态
推荐阅读
相关推荐
最近喜欢的几个电子设备
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档