h5-全屏插件

時間 2019-11-10

標籤 h5 全屏插件简体版

原文原文鏈接

 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.htmlhtml

全屏插件網頁中有詳細的介紹和案例能夠查看，這裏就很少介紹了jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。