h5-全屏插件

 <!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-全屏插件

最新文章

热门文章