<!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. package报错

    java类的第一行package 包路径 package报错 jdk版本不一致 或者jar包冲突

  2. linux服务器常用操作和命令

    1. 什么是linux服务器load average? Load是用来度量服务器工作量的大小,即计算机cpu任务执行队列的长度,值越大,表明包括正在运行和待运行的进程数越多.参考资料:http://e ...

  3. 7.9 规划Varnish缓存

    ./varnishlog -i VCL_LOG

  4. java学习之IO流(学习之旅，一)

    个人在学习IO流的时候看到如下所示java 流类图结构的时候,我的感想是,这么多··处于蒙的状态. Java流类图结构 这么多,没有分类不好学,那我们就慢慢一口一口的吃,这样每天学习一点就好了,其实很 ...

  5. JS: 随机点名程序与万年历

    随机点名程序 document.write(Math.random()); var stu = ["张三", "王五", "张二", &qu ...

  6. Hive 中的 order by, sort by, distribute by 与 cluster by

    Order By order by 会对输入做全排序, 因此只有一个Reducer(多个Reducer无法保证全局有序), 然而只有一个Reducer, 会导致当输入规模较大时, 消耗较长的计算时间. ...

  7. htmp to pdf

    C++ Library to Convert HTML to PDF html2pdf PrinceXML 收费 CutePDF Ghostscript PDFDoc VisPDF PDFDoc Sc ...

  8. Java8集合框架——HashSet源码分析

    本文的目录结构: 一.HashSet 的 Javadoc 文档注释和简要说明 二.HashSet 的内部实现:内部属性和构造函数 三.HashSet 的 add 操作和扩容 四.HashSet 的 r ...

  9. python计算：pi/4=1-1/3+1/5-1/7+…

    当有一项的绝对值小于10e-6停止计算 def cul() : ans = 0;add = 1 sign = 1 while(1/add>10**(-6)) : ans = ans + sign ...

  10. 031-PHP获取图像信息

    <?php list($width, $height, $type, $attr) = getimagesize("plane.jpg"); echo "宽度为:& ...