前端——bootstrap响应式网页制作-星游记主题（大作业+源码）

àì夳堔傛蜴生んèń 2024-05-06 23:25 129阅读 0赞

一、前言

  • 在b站上看见了童年神作的续集（虽然是个人自制）
  • 作品：【自制星游记续】十年后，我们再飞行！！！

【自制星游记续】十年后，我们再飞行！！！_哔哩哔哩_bilibili六一快乐，伙伴们。部分BGM来自：北京来的狼，鹿泊言{其实还有举杯邀酒请孤独，老杯做了很多动画bgm，很感谢他}开头的钢琴曲来自：再见秋猫配音表：麦当——繁陌浅 笛亚——名前桑 咕咚——在下秋爷 米龙——Variabilitysama 唐武德以及联盟士兵——老零ZERO , 视频播放量 93902、弹幕量 1023、点赞数 21409、投硬币枚数 20380、收藏人数 8282、转发人数 1365, 视频作者 K王桐木, 作者简介 修高！！！！！！！！！！！！！！！！！，相关视频：【自制星游记第28站】迷失的方向，最后的倒计时！，【自制星游记第27站】把彩虹海画下来，为自己而活，??耗时??????秒修复的星游记《再飞行》，只为让你们带着梦想再次高高的飞起来啊！，纳米核心 第一季，2023，再等星游！，九年相识，三年等待！终将再一次响彻整个宇宙！，星游记，一部曾经有机会触碰那个天花板的作品。，星游记—笛亚，【独家】赘婿 第1集 风起【4月国创】，“这短短三小时，看懂的人却整整花了十几年”464bdf14f2343b0a4a80ce9bb210e8e22e6f01d7.jpg_100w_100h_1c.png_57w_57h_1c.pnghttps://www.bilibili.com/video/BV1om4y147ZM剧情神还原！太赞了！

自己正好想了解一下响应式网页的制作——于是制作了一个简单的网页，用于练习

二、网页（源码）

星游记-响应式网页制作.zip - 蓝奏云文件大小：52.4 M|favicon.icohttps://wwwf.lanzout.com/iECSB0yuujxc

815fa30be64a46cebcd6a3b0d964e2ce.png

目录结构

把模块引用的CSS单独放一个文件夹里，方便以后CV

87b16bd38e11462fbe73da207d23e833.png

素材

搜集素材还是挺累时间的（文本内容+照片）

e0499e6a97754914a28b6f1ec08db735.png

三、功能

1、导航变色（下拉到一定距离-变色）
2、打字机特效
3、鼠标特效（点击特效（烟花）-还可以加鼠标移动特效）
4、音乐播放 (用的大佬的)
5、盒子出现动画（JS库）
6、时间轴滚动特效（Plugin）
7、响应式（※※※）网格布局（超出换行）
8、网页宠物（左下角）（Plugin）
9、返回顶部（黏性标签-联系客服）
10、canvas的应用（星空点绘制-拓展可以做樱花飞舞）
11、加载动画（简单：gif —进阶- 用svg画一个，然后加CSS动画）
12、轮播图 (用的大佬的)
13、图片-遮罩

14、响应式导航

TODO
1、图表
2、时钟
3、登录-注册页
4、表格

借用大佬的素材：
https://space.bilibili.com/266664645
时间轴、轮播图

还用了好几位大佬的素材，但是链接找不到了，呜呜呜

四、首页代码

  1. <!DOCTYPE html>
  2. <!-- Created By CodingNepal -->
  3. <html lang="en" dir="ltr">
  5. <head>
  6.     <meta charset="utf-8">
  7.     <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
  8.     <link rel="icon" type="image/png" href="./assets/img/favicon.ico">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  10.     <title>星游记模仿网页</title>
  11.     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
  12.         name='viewport' />
  14.     <!-- Main CSS -->
  15.     <link href="./assets/css/main.css" rel="stylesheet" />
  17.     <!-- Animation CSS -->
  18.     <link href="./assets/css/vendor/aos.css" rel="stylesheet" />
  20.     <!-- 顶部导航 CSS -->
  21.     <link rel="stylesheet" href="./assets-nav/index.css">
  23.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.     <!-- Google Font -->
  27.     <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">
  30.     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  32.     <!-- Google Font -->
  33.     <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">
  35.     <!-- Font Awesome Icons -->
  36.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
  37.         integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  39.     <!-- 打字机 -->
  40.     <link href="./assets-print/print.css" rel="stylesheet">
  42.     <!-- 加载效果 -->
  43.     <link href="./assets-loading/loading.css" rel="stylesheet">
  44.     <script src="./assets-loading/loading.js"></script>
  46.     <!-- 鼠标指针 -->
  47.     <link href="./assets-plugin/plugin.css" rel="stylesheet">
  51. </head>
  53. <body onload="gif_init()">
  56.     <!-- 加载动画 JS和CSS在loading文件里 -->
  57.     <div id="loading" class="gif">
  58.         <img src="./assets/image/cat-loading150x150.gif" />
  59.     </div>
  62.     <!--初音未来   plugin文件里-->
  63.     <div class="cywl">
  64.         <img src="https://external-30160.picsz.qpic.cn/39ff4096c204652d7c7b56418fb37631" width="65px" height="65px"
  65.             id="d" onclick="c();">
  66.     </div>
  69.     <nav id="id-navbar">
  70.         <div class="menu-icon">
  71.             <span class="fas fa-bars"></span>
  72.         </div>
  73.         <div class="logo">
  74.             星游记</div>
  75.         <div class="nav-items">
  76.             <li><a href="./01-index.html">首页</a></li>
  77.             <li><a href="./02-recommend.html">人物介绍</a></li>
  78.             <li><a href="./03-episode.html">剧情介绍</a></li>
  79.             <li><a href="./04-other.html">更多图片</a></li>
  80.             <li><a href="https://www.bilibili.com/video/BV1om4y147ZM">续集链接</a></li>
  81.         </div>
  82.         <div class="search-icon">
  83.             <span class="far fa-user"></span>
  84.         </div>
  85.         <div class="cancel-icon">
  86.             <span class="fas fa-times"></span>
  87.         </div>
  88.         <button type="submit" class="far fa-user my-button"> 登录</button>
  89.     </nav>
  92.     <!-- 大图片 -->
  93.     <!-- Card Overlay -->
  94.     <div class="card bg-dark overlay overlay-black text-white shadow-lg border-0">
  95.         <img class="card-img responsive-img " src="./assets/image/1.jpg" alt="Card image">
  96.         <div class="card-img-overlay d-flex align-items-center text-center">
  97.             <div class="card-body">
  98.                 <h3 class="card-title"><span id="my-text" class="text"></span></h3>
  99.                 <p class="card-text text-muted">
  100.                     不管黑暗怎样蔓延，总有星星，去把它照亮！
  101.                 </p>
  102.                 <a href="https://space.bilibili.com/279540198" class="btn btn-primary btn-round">JUST DO IT</a>
  103.             </div>
  104.         </div>
  105.     </div>
  106.     <!-- 用 innerHTML 插入文本到网页中有可能成为网站攻击的媒介，从而产生潜在的安全风险问题。所以HTML 5 中指定不执行由 innerHTML 插入的 -->
  107.     <!-- 打字机JS  -->
  108.     <script>
  109.         // 打字机
  111.         var text = document.getElementById('my-text');
  112.         const txt = ["相信奇迹的人，本身和奇迹一样了不起！", "给我高高的飞起来啊！", "拉勾的事情，就一定要做到！"];
  114.         var index = 0;
  115.         var xiaBiao = 0;
  116.         var huan = true;
  118.         setInterval(function () {
  120.             if (huan) {
  121.                 text.innerHTML = txt[xiaBiao].slice(0, ++index);
  122.                 console.log(index);
  123.             }
  124.             else {
  125.                 text.innerHTML = txt[xiaBiao].slice(0, index--);
  126.                 console.log(index);
  127.             }
  129.             if (index == txt[xiaBiao].length + 3) {
  130.                 huan = false;
  131.             }
  132.             else if (index < 0) {
  133.                 index = 0;
  134.                 huan = true;
  135.                 xiaBiao++;
  136.                 if (xiaBiao >= txt.length) {
  137.                     xiaBiao = 0;
  138.                 }
  139.             }
  141.         }, 200)
  142.     </script>
  144.     <!-- 主体 -->
  145.     <div class="container" style="margin-top: 100px; margin-bottom: 100px;">
  146.         <h3 class="h5 mb-4 font-weight-bold">人物语录</h3>
  147.         <!-- 人物话语 -->
  148.         <div class="card-deck card-pricing text-center" data-aos="fade-up">
  150.             <div class="card border-0 card-ddd">
  151.                 <img class="card-img-top litter-img" src="./assets/image/gudong.png" alt="Card image cap">
  152.                 <div class="card-body">
  153.                     <ul class="list-unstyled mt-3 mb-4">
  154.                         <li>王冠的真正含义是：</li>
  155.                         <li>我会为你们抵挡一切</li>
  156.                         <li>永远让你们只看到</li>
  157.                         <li>金色的希望！</li>
  158.                     </ul>
  159.                     <button type="button" class="btn btn-primary">咕咚国王</button>
  160.                 </div>
  161.             </div>
  164.             <div class="card border-0 card-ddd">
  165.                 <img class="card-img-top litter-img" src="./assets/image/111.jpg" alt="Card image cap">
  167.                 <div class="card-body">
  168.                     <ul class="list-unstyled mt-3 mb-4">
  169.                         <li>如果黑洞能吞下</li>
  170.                         <li>一百亿个太阳</li>
  171.                         <li>我就是———</li>
  172.                         <li>一百亿零一个！</li>
  173.                     </ul>
  174.                     <button type="button" class="btn btn-primary">麦当</button>
  175.                 </div>
  176.             </div>
  178.             <div class="card border-0 card-ddd">
  179.                 <img class="card-img-top litter-img" src="./assets/image/4.jpeg" alt="Card image cap">
  180.                 <div class="card-body">
  181.                     <ul class="list-unstyled mt-3 mb-4">
  182.                         <li>星空之所以美丽</li>
  183.                         <li>就是因为在无限的宇宙中</li>
  184.                         <li>不管黑暗如何蔓延</li>
  185.                         <li>都有星星的光芒去把它照亮！</li>
  186.                     </ul>
  187.                     <button type="button" class="btn btn-primary">迪亚</button>
  188.                 </div>
  189.             </div>
  192.             <div class="card border-0 card-ddd">
  193.                 <img class="card-img-top litter-img" src="./assets/image/6.jpg" alt="Card image cap">
  195.                 <div class="card-body">
  196.                     <ul class="list-unstyled mt-3 mb-4">
  197.                         <li>把所有人</li>
  199.                         <li>都踩在脚下</li>
  200.                         <li>才能到达的顶峰</li>
  201.                         <li>还能看到什么风景？</li>
  203.                     </ul>
  204.                     <button type="button" class="btn btn-primary">米龙</button>
  205.                 </div>
  206.             </div>
  208.         </div>
  211.         <!-- 照片集 -->
  212.         <section class="pt-4  bg-other rounded" style="margin-top: 50px;" data-aos="zoom-in">
  213.             <div class="container text-center">
  214.                 <h3 class="">照片集</h3>
  215.                 <div class="row p-3">
  216.                     <div class="col-md-4 " style="margin-bottom: 30px;">
  217.                         <a href="./landing.html"><img src="assets/image/gudddd.png" class="shadow-lg litter-img"></a>
  218.                     </div>
  219.                     <div class="col-md-4 " style="margin-bottom: 30px;">
  220.                         <a href="./login.html"><img src="assets/image/mai.png" class="shadow-lg litter-img"></a>
  221.                     </div>
  222.                     <div class="col-md-4 " style="margin-bottom: 30px;">
  223.                         <a href="./blog.html"><img src="assets/image/diya.png" class="shadow-lg litter-img"></a>
  224.                     </div>
  225.                     <div class="col-md-4 " style="margin-bottom: 30px;">
  226.                         <a href="./blog.html"><img src="assets/image/duiz.png" class="shadow-lg litter-img"></a>
  227.                     </div>
  228.                     <div class="col-md-4 " style="margin-bottom: 30px;">
  229.                         <a href="./blog.html"><img src="assets/image/feili.png" class="shadow-lg litter-img"></a>
  230.                     </div>
  231.                     <div class="col-md-4 " style="margin-bottom: 30px;">
  232.                         <a href="./blog.html"><img src="assets/image/mi.png" class="shadow-lg litter-img"></a>
  233.                     </div>
  234.                 </div>
  235.             </div>  
  236.         </section>
  239.     </div>
  241.     <!-- 左边黏性标签 -->
  242.     <div id="id-stick" class="stick-box bg-transparent">
  243.         <div class="stick-text">
  244.             ? 联系客服
  245.         </div>
  246.     </div>
  248.     <!-- 左边黏性标签 -->
  249.     <style>
  250.         .stick-box {
  251.             position: fixed;
  252.             /* 盒子大小 */
  253.             width: 50px;
  254.             height: 150px;
  255.             z-index: 999;
  256.             /* 左下角 */
  257.             left: 0%;
  258.             bottom: 60%;
  259.             /* 水平垂直居中 */
  260.             display: flex;
  261.             justify-content: center;
  262.             align-items: center;
  263.             border-top-right-radius: 10px;
  264.             /* 添加右上角圆角属性 */
  265.             border-bottom-right-radius: 10px;
  266.             /* 添加右下角圆角属性 */
  267.             box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  268.             /* 添加阴影 */
  269.         }
  271.         .stick-text {
  272.             /*  属性设置了文字的书写模式为竖排，vertical-rl 的意思是从上到下，从右到左排列文字 */
  273.             writing-mode: vertical-rl;
  274.             /* 属性设置了文字排列方向为混合方向，当在竖排模式下，该属性可以让文字既不会上下倒置，也不会左右倒置。 */
  275.             text-orientation: mixed;
  276.             font-size: 20px;
  277.             /*  属性设置了行高为字体高度的 1.2 倍，用来控制文字的行距。 */
  278.             line-height: 4;
  279.             color: #fff;
  280.             margin: auto;
  281.         }
  283.         /* 媒体查询 响应式 0-700px生效 */
  284.         @media (max-width: 700px) {
  285.             .stick-box {
  286.                 width: 30px;
  287.                 height: 100px;
  288.             }
  290.             .stick-text {
  291.                 font-size: 14px;
  292.                 /* 当屏幕宽度小于400px时，黏性标签的字体大小变为 16px */
  293.             }
  294.         }
  295.     </style>
  298.     <!-- 右边黏性标签 -->
  299.     <!-- sticky tag -->
  300.     <div id="sticky-tag" class="sticky-tag bg-only" onclick="scrollToTop()">
  301.         <div class="right-stikc-text">
  302.             <!-- <i class="fal fa-angle-double-up"></i> -->
  303.             顶部
  304.         </div>
  305.     </div>
  307.     <!-- 右边黏性标签 -->
  308.     <style>
  309.         /* 定义样式 */
  310.         .sticky-tag {
  311.             position: fixed;
  312.             /* 左下角 */
  313.             right: -100px;
  314.             bottom: 10%;
  316.             transform: translateY(-50%);
  317.             /* 盒子大小 */
  318.             width: 50px;
  319.             height: 50px;
  320.             z-index: 999;
  322.             /* 水平垂直居中 */
  323.             display: flex;
  324.             justify-content: center;
  325.             align-items: center;
  326.             /* 添加圆角属性 */
  327.             border-radius: 50%;
  328.             /* 添加阴影 */
  329.             box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  331.             color: #fff;
  332.             text-align: center;
  333.             line-height: 30px;
  334.             cursor: pointer;
  335.             opacity: 0;
  336.             transition: all .3s ease-in-out;
  337.         }
  339.         .sticky-tag.show {
  340.             right: 20px;
  341.             opacity: 1;
  342.         }
  344.         .right-stikc-text {
  345.             /*  属性设置了文字的书写模式为竖排，vertical-rl 的意思是从上到下，从右到左排列文字 */
  346.             writing-mode: vertical-rl;
  347.             /* 属性设置了文字排列方向为混合方向，当在竖排模式下，该属性可以让文字既不会上下倒置，也不会左右倒置。 */
  348.             text-orientation: mixed;
  349.             font-size: 14px;
  350.             /*  属性设置了行高为字体高度的 1.2 倍，用来控制文字的行距。 */
  351.             line-height: 4;
  352.             color: #fff;
  353.             margin: auto;
  354.         }
  356.         /* 媒体查询 响应式 0-700px生效 */
  357.         @media (max-width: 700px) {
  358.             .sticky-tag {
  359.                 width: 30px;
  360.                 height: 30px;
  361.             }
  363.             .right-stikc-text {
  364.                 font-size: 8px;
  365.                 /* 当屏幕宽度小于400px时，黏性标签的字体大小变为 16px */
  366.             }
  367.         }
  368.     </style>
  372.     <!-- 音乐盒子 -->
  373.     <!-- 音乐CSS -->
  374.     <link rel="stylesheet" href="./assets-music/style.css">
  375.     <link rel="stylesheet" href="./assets-music/icon/iconfont.css">
  376.     <link href="./assets-music/style.css" rel="stylesheet">
  377.     <div class="music-box">
  379.         <!-- 播放器 -->
  380.         <div class="player">
  381.             <!-- 音乐插图 -->
  382.             <section class="img">
  383.                 <img id="bg-img" src="" alt="">
  384.             </section>
  386.             <!-- 信息 -->
  387.             <section class="info">
  388.                 <!-- 进度栏 -->
  389.                 <div class="progress">
  390.                     <div id="start">0:00</div>
  391.                     <div id="bar"></div>
  392.                     <div id="end">3:15</div>
  393.                 </div>
  394.                 <!-- 歌曲信息 -->
  395.                 <div class="song-detail">
  396.                     <span id="title"></span>
  397.                     <span id="author"></span>
  398.                 </div>
  399.                 <!-- 按钮区域 -->
  400.                 <div id="controls" class="controls">
  401.                     <span><i id="list" class="iconfont icon-danlieliebiao"></i></span>
  402.                     <div class="play">
  403.                         <span><i id="voice" class="iconfont icon-shengyin_shiti"></i></span>
  404.                         <span><i id="pre" class="iconfont icon-shangyishou"></i></span>
  405.                         <span><i id="play" class="iconfont icon-24gf-play"></i></span>
  406.                         <span><i id="next" class="iconfont icon-xiayishou2"></i></span>
  407.                         <span><i id="mode" class="iconfont icon-suiji"></i></span>
  408.                     </div>
  409.                     <span><i id="" class="iconfont icon-tianjia"></i></span>
  410.                 </div>
  411.             </section>
  413.             <!-- audio标签 -->
  414.             <section class="audio">
  415.                 <audio id="audio" controls src="">
  416.                 </audio>
  417.             </section>
  418.         </div>
  420.         <!-- 箭头 -->
  421.         <div class="right-arrow">
  422.             <div class="fuhao">
  423.                 >
  424.             </div>
  425.         </div>
  426.     </div>
  429.     <!-- 音乐js -->
  430.     <script src="./assets-music/script.js"></script>
  431.     <script>
  433.         var arrow = document.querySelector(".right-arrow");
  435.         var music = document.querySelector(".music-box");
  437.         var fuhao = document.querySelector(".fuhao");
  439.         var isFlipped = false;
  441.         arrow.addEventListener("click", function () {
  442.             if (isFlipped) {
  446.                 music.classList.remove("show");
  448.                 fuhao.classList.remove("flip");
  449.                 isFlipped = false;
  450.                 arrow.setAttribute("transform", "rotate(0)");
  451.             } else {
  452.                 fuhao.classList.add("flip");
  453.                 isFlipped = true;
  454.                 arrow.setAttribute("transform", "rotate(180)");
  456.                 music.classList.add("show");
  457.             }
  458.         });
  460.     </script>
  464.     <!-- 尾部 footer -->
  465.     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  466.         x="0px" y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
  467.         <path class="bg-them" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z">
  468.         </path>
  469.     </svg>
  470.     <footer class="bg-them pb-5">
  471.         <div class="container">
  472.             <div class="row">
  473.                 <div class="col-12 col-md mr-4">
  474.                     <i class="fas fa-copyright text-white"></i>
  475.                     <small class="d-block mt-3 mb-3 text-white">© 2023 Pan Peter</small>
  476.                 </div>
  477.                 <div class="col-6 col-md">
  478.                     <h5 class="mb-4 text-white">星游记官网</h5>
  479.                     <ul class="list-unstyled text-small">
  480.                         <li><a class="text-white" href="#">风暴法米拉1</a></li>
  481.                         <li><a class="text-white" href="#">风暴法米拉2</a></li>
  482.                         <li><a class="text-white" href="#">剧场版1</a></li>
  483.                         <li><a class="text-white" href="#">剧场版2</a></li>
  484.                     </ul>
  485.                 </div>
  486.                 <div class="col-6 col-md">
  487.                     <h5 class="mb-4 text-white">我们的故事</h5>
  488.                     <ul class="list-unstyled text-small">
  489.                         <li><a class="text-white" href="#">世界观</a></li>
  490.                         <li><a class="text-white" href="#">人物小专</a></li>
  491.                         <li><a class="text-white" href="#">故事脚本</a></li>
  492.                         <li><a class="text-white" href="#">动画制作</a></li>
  493.                     </ul>
  494.                 </div>
  495.                 <div class="col-6 col-md">
  496.                     <h5 class="mb-4 text-white">能力解说</h5>
  497.                     <ul class="list-unstyled text-small">
  498.                         <li><a class="text-white" href="#">势力</a></li>
  499.                         <li><a class="text-white" href="#">道具</a></li>
  500.                         <li><a class="text-white" href="#">时空</a></li>
  501.                         <li><a class="text-white" href="#">科技</a></li>
  502.                     </ul>
  503.                 </div>
  504.                 <div class="col-6 col-md">
  505.                     <h5 class="mb-4 text-white">关于我们</h5>
  506.                     <ul class="list-unstyled text-small">
  507.                         <li><a class="text-white" href="#">团队介绍</a></li>
  508.                         <li><a class="text-white" href="#">获奖记录</a></li>
  509.                         <li><a class="text-white" href="#">幕后制作</a></li>
  510.                         <li><a class="text-white" href="#">制作发行</a></li>
  511.                     </ul>
  512.                 </div>
  513.             </div>
  514.         </div>
  515.     </footer>
  520.     <!-- nav 顶部导航 JS -->
  521.     <script>
  522.         const menuBtn = document.querySelector(".menu-icon span");
  523.         const searchBtn = document.querySelector(".search-icon");
  524.         const cancelBtn = document.querySelector(".cancel-icon");
  525.         const items = document.querySelector(".nav-items");
  526.         const form = document.querySelector("form");
  527.         menuBtn.onclick = () => {
  528.             items.classList.add("active");
  529.             menuBtn.classList.add("hide");
  530.             searchBtn.classList.add("hide");
  531.             cancelBtn.classList.add("show");
  532.         }
  533.         cancelBtn.onclick = () => {
  534.             items.classList.remove("active");
  535.             menuBtn.classList.remove("hide");
  536.             searchBtn.classList.remove("hide");
  537.             cancelBtn.classList.remove("show");
  538.             form.classList.remove("active");
  539.             cancelBtn.style.color = "#fff";
  540.         }
  541.         searchBtn.onclick = () => {
  542.             form.classList.add("active");
  543.             searchBtn.classList.add("hide");
  544.             cancelBtn.classList.add("show");
  545.         }
  546.     </script>
  548.     <!-- 顶部导航-黏性标签 变色&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -->
  549.     <script>
  550.         const stickyTag = document.getElementById('sticky-tag');
  551.         const navbar = document.getElementById('id-navbar');
  552.         const scrollOffset = 400;
  554.         const stick = document.getElementById('id-stick');
  556.         window.addEventListener('scroll', function () {
  557.             if (window.pageYOffset > 400) {
  558.                 stickyTag.classList.add('show');
  560.                 navbar.classList.add('bg-primary'); // 添加背景蓝色样式
  561.                 navbar.classList.remove('bg-transparent'); // 移除透明背景样式
  562.                 navbar.classList.add('fixed-top'); // 添加 fixed-top 样式
  564.                 stick.classList.add('bg-only'); // 添加背景蓝色样式
  565.                 stick.classList.remove('bg-transparent'); // 移除透明背景样式
  566.             } else {
  567.                 stickyTag.classList.remove('show');
  569.                 navbar.classList.remove('bg-primary'); // 移除背景蓝色样式
  570.                 navbar.classList.add('bg-transparent'); // 添加透明背景样式
  572.                 stick.classList.remove('bg-only'); // 移除背景蓝色样式
  573.                 stick.classList.add('bg-transparent'); // 添加透明背景样式
  574.             }
  575.         });
  576.     </script>
  579.     <!-- JS plugin -->
  581.     <!-- 鼠标点击烟花爆炸效果 -->
  582.     <script type="text/javascript" src="https://api.azpay.cn/729/2.js"></script>
  586.     <!--------------------------------------
  587. JAVASCRIPTS
  588. --------------------------------------->
  589.     <script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
  590.     <script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
  591.     <script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
  592.     <script src="./assets/js/vendor/share.js" type="text/javascript"></script>
  595.     <!-- Animation -->
  596.     <script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
  597.     <noscript>
  598.         <style>
  599.             *[data-aos] {
  600.                 display: block !important;
  601.                 opacity: 1 !important;
  602.                 visibility: visible !important;
  603.             }
  604.         </style>
  605.     </noscript>
  606.     <script>
  607.         AOS.init({
  608.             duration: 700
  609.         });
  610.     </script>
  612.     <!-- Disable animation on less than 1200px, change value if you like -->
  613.     <script>
  614.         AOS.init({
  615.             disable: function () {
  616.                 var maxWidth = 1200;
  617.                 return window.innerWidth < maxWidth;
  618.             }
  619.         });
  620.     </script>
  622. </body>
  624. </html>

视频

电石QwQ的个人空间-电石QwQ个人主页-哔哩哔哩视频哔哩哔哩电石QwQ的个人空间，提供电石QwQ分享的视频、音频、文章、动态、收藏等内容，关注电石QwQ账号，第一时间了解UP注动态。不甘寂寞3aedc15aae12bfaf24d1f4c89b87c071a0676fab.jpghttps://space.bilibili.com/279540198

发表评论

表情：
评论列表 （有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

    相关 中药铺主题静态网页大作业

    > 本人是一名在医学院校学习计算机的学生，即将进入大三，写博客即是为了记录自己的学习历程，又希望能够帮助到很多和自己一样处于起步阶段的萌新。临渊羡鱼，不如退而结网。一起加油！

    末蓝、末蓝、/ 0 赞/ 59 阅读