<!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. GoJS、AngularJS自定义组件JS SDK注解参考

    通常一个SDK包含一个或多个API 下面是一个SDK的实例: if (typeof(wlNgApp) === "undefined") wlNgApp = angular.modu ...

  2. HDU1054-Strategic Game

    Strategic Game Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. 7.6 CLI 管理Varnish

    ./varnishd -f /usr/common/varnish/etc/varnish/ -a 测试: 代理tomcat服务器地址:http://172.20.10.5:1111/ telnet ...

  4. 数据库建模工具pd的使用

  5. wincc的服务器－客户机模式具体做法(全抄-未测试)

    一.原来的工作方式:在同一工作组中4台计算机其windows名分别为A.B.C.D且都已安装好wincc5.0+sp2,原来在每台计算机上运行的均是单用户,4台计算机上实际运行的是一个相同的项目,最先 ...

  6. 九九乘法表的四种三角形排布方式（for循环以及while循环的互换）

    #region //右上 for (int i = 1; i <= 9; i++){ for (int j = 1; j <= 9; j++){ if (i > j){ Consol ...

  7. python -- 相对路径、绝对路径、以及路径的获取

    1.定义 绝对路径:就是文件的真正存在的路径,是指从硬盘的根目录(盘符)开始,进行一级级目录指向文件.   相对路径:就是以当前文件为基准进行一级级目录指向被引用的资源文件. ../ 表示当前文件所在 ...

  8. hihocoder 1241：Best Route in a Grid

    #1241 : Best Route in a Grid 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个N行N列的非负整数方阵,从左上角(1,1)出发,只能向下 ...

  9. Windows按键消息—虚拟键码（转）

    源地址:http://c.biancheng.net/cpp/html/1253.html 虚拟键码保存在WM_KEYDOWN.WM_KEYUP.WM_SYSKEYDOWN和WM_SYSKEYUP消息 ...

  10. JVM探秘：jstack查看Java线程状态

    本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. jstack命令可以打印Java进程的各个线程堆栈跟踪信息,可以用来查看Java中各个 ...