h5-全屏插件

2019-08-22 19:02:42 阅读：227 来源： 互联网

 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

h5-全屏插件