h5-全屏插件

2019-08-22 19:02:42 作者：互联网

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*交集选择器:h3当当前元素同时添加了second和current的样式的时候才有效果*/
 8         .first.current h3{
 9             font-size: 100px;
10         }
11     </style>
12     <!--因为这个全屏插件是基于jquery的，所以要在导入前先导入jquery-->
13     <script src="../js/jquery-3.4.1.js"></script>
14     <script src="../js/jquery.fullPage.min.js"></script>
15 </head>
16 <body>
17 <div id="dowebok">
18     <div class="section first">
19         <h3>第一屏</h3>
20     </div>
21     <div class="section second">
22         <h3>第二屏</h3>
23     </div>
24     <div class="section">
25         <h3>第三屏</h3>
26     </div>
27     <div class="section">
28         <h3>第四屏</h3>
29     </div>
30 </div>
31 <script>
32     $(function(){
33         $('#dowebok').fullpage({
34             /*设置每一屏的背景颜色*/
35             sectionsColor:["red","green","blue","pink"],
36             /*当滚动到某一屏之后调用
37             * index:当前屏的索引，索引从1开始
38             * */
39             afterLoad:function (anchorLink,index) {
40                 $(".section").removeClass("current");
41                 alert(index);
42                 /*加样式， 当滚动到某一屏之后，为元素添加样式  -- 标记*/
43                 $(".section").eq(index-1).addClass("current");
44             }
45         });
46     });
47 </script>
48 </body>
49 </html>

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

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

标签：index,插件,样式,一屏,h5,current,全屏
来源： https://www.cnblogs.com/FengBrother/p/11396239.html