<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         /*交集选择器:h3当当前元素同时添加了second和current的样式的时候才有效果*/

         .first.current h3{

             font-size: 100px;

         }

     </style>

     <!--因为这个全屏插件是基于jquery的，所以要在导入前先导入jquery-->

     <script src="../js/jquery-3.4.1.js"></script>

     <script src="../js/jquery.fullPage.min.js"></script>

 </head>

 <body>

 <div id="dowebok">

     <div class="section first">

         <h3>第一屏</h3>

     </div>

     <div class="section second">

         <h3>第二屏</h3>

     </div>

     <div class="section">

         <h3>第三屏</h3>

     </div>

     <div class="section">

         <h3>第四屏</h3>

     </div>

 </div>

 <script>

     $(function(){

         $('#dowebok').fullpage({

             /*设置每一屏的背景颜色*/

             sectionsColor:["red","green","blue","pink"],

             /*当滚动到某一屏之后调用

             * index:当前屏的索引，索引从1开始

             * */

             afterLoad:function (anchorLink,index) {

                 $(".section").removeClass("current");

                 alert(index);

                 /*加样式， 当滚动到某一屏之后，为元素添加样式  -- 标记*/

                 $(".section").eq(index-1).addClass("current");

             }

         });

     });

 </script>

 </body>

 </html>

全屏插件下载地址：http://www.dowebok.com/77.html

全屏插件网页中有详细的介绍和案例可以查看，这里就不多介绍了

h5-全屏插件的更多相关文章

  1. java_eclipse_maven_svn_主题彩色插件_全屏插件

    作为一名不算新手的猿猿,还来纠结IDE环境搭建实属不该,不过着实纠结了不少时间. target: eclipse + maven +svn + 设置默认编码+全屏 绕的路就不说了,直奔主题,由于mav ...

  2. fullpage 全屏插件

     fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单, ...

  3. H5全屏滚动专题页最佳实践

    1.slip.js + rem.js 主要插件: slip.js github: https://github.com/binnng/slip.js rem.js 插件为阿里淘宝的 rem 实现的基础 ...

  4. Eclipse/MyEclipse全屏插件

    此插件可以让Eclipse/MyEclipse的界面全屏,隐藏菜单栏和状态栏! MyEclipse 2014/2015中亲测有效! 插件下载: http://files.cnblogs.com/got ...

  5. 六一广告页H5全屏滚动效果实现

    明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...

  6. FullPage.js全屏插件文档及使用方法

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持 ...

  7. 虚拟机VMWare安装苹果系统MacOS详细教程（联网设置，全屏插件、文件互传）

    运行环境: VMware® Workstation 12 Pro(自行安装,或者用这个) 推荐(下面以10.11.6版本做的教程,但是安装时推荐使用此版本安装然后升级到10.11.6):MacOS X ...

  8. jQuery全屏插件Textarea Fullscreen

    插件描述 Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js ...

  9. gvim 全屏 插件

    1.这里下载插件zip解压后,将fullscreen.dll放到gvim.exe同目录下 2.执行 :call libcallnr()//切换全屏模式 3.上面的命令非常麻烦,可以在_vimrc中ma ...

  10. vue 中使用 screenfull.js 全屏插件

    参考网址: https://blog.csdn.net/houyibing930920/article/details/89214200 https://www.jianshu.com/p/cfbb1 ...

随机推荐

  1. jq插件和jq

    封装一个jq (function(win) { var jQuery = function(selecter) { this.version = '1.0.1'; //版本号 this.selecte ...

  2. 如何让Dev支持c++11特性

    1.点击工具选择编译选项 2.在编译时加入以下命令点击之后再将-std=c++11加入,点击确定就ok了

  3. Day6 - J - Cartesian Tree POJ - 2201

    Let us consider a special type of a binary search tree, called a cartesian tree. Recall that a binar ...

  4. JDK8中的HashMap实现原理及源码分析

    大纲 一.什么是Hash?什么是HashMap? 二.HashMap的内部实现机制 1.HashMap基本元素 ①DEFAULT_INITIAL_CAPACITY&MAXIMUM_CAPACI ...

  5. Java 解决Emoji表情过滤问题

    Emoji表情从三方数据中获取没有过滤,导致存入DB的时候报错. 原因: UTF-8编码有可能是两个.三个.四个字节.Emoji表情是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去 ...

  6. Java线程池 ThreadPoolExecutor类

    什么是线程池? java线程池是将大量的线程集中管理的类, 包括对线程的创建, 资源的管理, 线程生命周期的管理. 当系统中存在大量的异步任务的时候就考虑使用java线程池管理所有的线程, 从而减少系 ...

  7. 不可不知的spark shuffle

    shuffle概览 一个spark的RDD有一组固定的分区组成,每个分区有一系列的记录组成.对于由窄依赖变换(例如map和filter)返回的RDD,会延续父RDD的分区信息,以pipeline的形式 ...

  8. c++程序—选择结构

    if(判断条件){执行语句} #include<iostream> using namespace std; #include<string> int main() { ; c ...

  9. HDU - 1698 Just a Hook （线段树---区间修改）

    题意:n个棍子,初始值全为1,给定Q个区间,分别赋值,问n个棍子的总值. 分析:lazy标记主要体现在update上. 当l <= L && R <= r时,该结点的子结点 ...

  10. 中兴获25个5G商用合同

    网易科技讯,6 月 25 日消息,在 2019 年 MWC 上海展期间,中兴通讯宣布随着全球首批 5G 规模商用部署展开,已在全球获得 25 个 5G 商用合同,覆盖中国.欧洲.亚太.中东等主要 5G ...