代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="img/html.svg">
<!-- 引入css -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index.css">
<!-- 引入js -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
/* 隐藏滚轮 */
html::-webkit-scrollbar {
width: 0;
}
body::-webkit-scrollbar {
width: 0;
}
/* 懒加载的过渡动画 */
.flag {
opacity: 0;
filter: blur(4px);
transition: all 1s;
transform: translateY(20%);
}
.actived {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
</style>
</head>
<body>
<!-- 头部开始 -->
<!-- 导航条开始 -->
<nav class="navbar navbar-expand-lg py-4 sticky-top container-fluid" id="header_nav"
>
<!-- 网站名字logo -->
<a href="index.html" class="navbar-brand ms-4">前端探索者</a>
<!-- 右边折叠按钮 -->
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 中间部分 -->
<div class="navbar-collapse collapse d-none">
<ul class="navbar-nav m-auto ">
<!-- 左边菜单 -->
<li class="nav-item ">
<a href="index.html" class="nav-link active" role="button" aria-expanded="false">首页</a>
</li>
<li class="nav-item dropdown" id="WebList">
<a href="#" class="nav-link dropdown-toggle " role="button" data-bs-toggle="dropdown"
aria-expanded="false">前端榜单</a>
<ul class="dropdown-menu" id="WebList_Item">
<li><a href="study.html" class="dropdown-item">Bootstrap</a></li>
<li><a href="#" class="dropdown-item">Layui</a></li>
<li><a href="#" class="dropdown-item">React</a></li>
<li><a href="#" class="dropdown-item">Vue</a></li>
</ul>
</li>
<li class="nav-item dropdown" id="StudyMethodList">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
aria-expanded="false">学习攻略</a>
<ul class="dropdown-menu" id="StudyMethodList_Item">
<li><a href="#" class="dropdown-item">零基础学Bootstrap</a></li>
<li><a href="#" class="dropdown-item">零基础学Layui</a></li>
<li><a href="#" class="dropdown-item">零基础学React</a></li>
<li><a href="#" class="dropdown-item">零基础学Vue</a></li>
</ul>
</li>
</ul>
<!-- 中间搜索 -->
<form class="d-flex d-inline-block " role="search" id="sousuo">
<input class="form-control rounded-0" id="sousuoneirong" type="search" placeholder="Search"
aria-label="Search"
>
<button class="btn btn-outline-primary rounded-0" type="submit">搜索</button>
</form>
<!-- 右边菜单 -->
<ul class="navbar-nav m-auto d-none d-xxl-flex">
<li class="nav-item ">
<a href="myhome.html" class="nav-link " role="button" aria-expanded="false">论坛中心</a>
</li>
<li class="nav-item ">
<a href="#" class="nav-link " role="button" aria-expanded="false">我的笔记</a>
</li>
<li class="nav-item ">
<a href="#" class="nav-link " role="button" aria-expanded="false">联系我们</a>
</li>
</ul>
<!-- 用户头像 -->
<a role="button" class="btn me-1 yonghu" href="login.html">
<img src="img/weekend.awebp" class="rounded-circle">
</a>
</div>
</nav>
<!-- 折叠按钮侧导航 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<h6 class="dropdown-header">Menu</h6>
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
前端榜单
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Bootstrap</a></li>
<li><a class="dropdown-item" href="#">LayUi</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">更多</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
学习攻略
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">教你七天学会Bootstrap</a></li>
<li><a class="dropdown-item" href="#">零基础学Js</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">更多</a></li>
</ul>
</li>
<div class="dropdown-divider my-4"></div>
<h6 class="dropdown-header">More</h6>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">论坛中心</a>
</li>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">我的笔记</a>
</li>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">联系我们</a>
</li>
</ul>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">登录</button>
</div>
</div>
</div>
<!-- 导航条结束 -->
<!-- 背景图片开始 -->
<section class="background_img ">
<div class="container">
<div class="d-flex justify-content-center py-5">
<div class="align-self-center">
<h1 class="text-white text-center" id="back_text_title">Web前端</h1>
<div class="text-white text-center my-4 d-none d-lg-block" id="back_text_content">
学习web前端体验不同的代码世界
</div>
</div>
</div>
</div>
</section>
<!-- 背景结束 -->
<!-- 首页内容开始 -->
<div class="container">
<!-- 第一部分开始 -->
<div class="mt-3">
<!-- 1 -->
<div class="row flex-lg-row-reverse align-items-center g-5 py-5 px-5">
<div class="col-lg-6 pic">
<img src="img/web_02.jpg" class="d-block img-fluid flag" alt="Bootstrap Themes" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3 text-center">搭建属于自己网页</h1>
<p class="lead mt-4 p_1">
拥有自己的个人网页可以让你感到非常有成就感。你可以根据自己的喜好和风格来设计和布局网页，打造出独一无二的个人空间。
你可以在网页上添加自己的照片、音乐、视频等内容，让用户能够更直观地了解你的个性和风格。
总之，个人网页的体验可以非常棒，它不仅可以展示你的个性和风格，还可以提供一种个性化、互动的浏览体验，帮助你与用户建立联系和互动。
</p>
<div class="d-grid gap-2 d-md-flex justify-content-center mt-3">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2 liaojie_btn"
>点击了解详情
</button>
</div>
</div>
</div>
<!-- 1结束 -->
<!-- 2 -->
<div class="row flex-lg-row-reverse align-items-center g-5 py-5 px-5">
<div class="col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3 text-center p_1">记录学习中的疑惑</h1>
<p class="lead mt-4 p_1">
本网站专为热爱学习前端的人群所打造。前端的学习过程中会遇到很多依靠自己无法解决的问题。
因此本站设计了个人笔记模块,可以帮助我们整理知识点，将抽象的概念和内容转化为可视化和结构化的形式。
可以帮助我们建立概念框架，将不同的知识点联系起来。这有助于我们更好地理解各个知识点之间的关系和逻辑，并且能够更加深入地思考和探索所学内容。
</p>
<div class="d-grid gap-2 d-md-flex justify-content-center mt-3">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2 liaojie_btn"
>点击了解详情
</button>
</div>
</div>
<div class=" col-lg-6 pic">
<img src="img/javascript.jpg" class="d-block img-fluid flag" alt="Bootstrap Themes" loading="lazy">
</div>
</div>
</div>
<!-- 第一部分结束 -->
<!-- 热门框架 -->
<div class="mt-5">
<div class="web_title">
<p class="p_yi">常见的前端框架</p>
<p class="p_er">让开发更加简洁</p>
</div>
<!-- 1 -->
<div class="row flag">
<div class="col-6 col-xxl-3 mt-5 flex_box">
<div class="content_box">
<div class="content_icon content_icon1">1</div>
<div class="content_content">
<h1>Bootstrap</h1>
<p>简洁、直观、强悍的前端开发框架</p>
<p>让web开发更迅速、简单。</p>
</div>
</div>
</div>
<!-- 2 -->
<div class="col-6 col-xxl-3 mt-5 flex_box">
<div class="content_box">
<div class="content_icon content_icon2">2</div>
<div class="content_content">
<h1>LayUi</h1>
<p>开源模块化前端 UI 框架</p>
<p>易上手开源免费的Web UI组件库</p>
</div>
</div>
</div>
<!-- 3 -->
<div class="col-6 col-xxl-3 mt-5 flex_box">
<div class="content_box">
<div class="content_icon content_icon3">3</div>
<div class="content_content">
<h1>Vue</h1>
<p>渐进式JavaScript 框架</p>
<p>适用场景丰富的Web前端框架。</p>
</div>
</div>
</div>
<!-- 4 -->
<div class="col-6 col-xxl-3 mt-5 flex_box">
<div class="content_box">
<div class="content_icon content_icon4">4</div>
<div class="content_content">
<h1>React</h1>
<p>用于构建用户界面的JavaScript库</p>
<p>使创建交互式UI变得轻而易举。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 轮播 -->
<div id="carouselExampleAutoplaying" class="carousel slide carousel-fade mt-5" data-bs-ride="carousel">
<!-- 指示器 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<!-- 图片 -->
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="./img/bootstrap.jpg" class="d-block w-100 carousel_img">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="./img/vuejpg.jpg" class="d-block w-100 carousel_img">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="./img/react.webp" class="d-block w-100 carousel_img">
</div>
</div>
<!-- 左右按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- 组件案例 -->
<div class="mt-5">
<!-- 组件card -->
<div class="row">
<div class="col-6">
<p class="p_er">框架实例</p>
<p class="lead neirong">在web前端开发的过程中许多样式都是相似的,框架将常见的样式写成了不同的组件。
以下是常见的几个组件示例中,可以尝试在VsCode实践一下!</p>
</div>
<div class="col-6"></div>
</div>
<div class="row mt-5 rounded-3 p-4 flag " style="background-color: #ffffff;">
<!-- 组件1 -->
<div class="col-lg-5">
<h3>1.卡片</h3>
<div class="d-flex justify-content-center mt-3" style="width: auto;">
<div class="card">
<img src="./img/jquery.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Jquery</h5>
<p class="card-text">这是Jquery,前端最重要的语言之一</p>
<a href="#" class="btn btn-primary">点击了解</a>
</div>
</div>
</div>
<div class="mt-3 pt-3 pb-3 ps-4">
<code>
<div>
<div class="card" style="width:26rem;">
</div>
<div style="text-indent: 1.5rem;">
<img src="./img/jquery.jpg" class="card-img-top">
</div>
<div style="text-indent: 1.5rem;">
<div class="card-body">
</div>
<div style="text-indent: 3rem;">
<h5 class="card-title">Jquery</h5>
</div>
<div style="text-indent: 3rem;">
<p class="card-text">
</div>
<div style="text-indent: 4.5rem;">
这是Jquery,前端最重要的语言之一
</div>
<div style="text-indent: 3rem;">
</p>
</div>
<div style="text-indent: 3rem;">
<a href="#" class="btn btn-primary">
</div>
<div style="text-indent: 4.5rem;">
点击了解
</div>
<div style="text-indent: 3rem;">
</a>
</div>
<div style="text-indent: 1.5rem;">
</div>
</div>
<div>
</div>
</div>
</code>
</div>
</div>
<!-- 组件2 -->
<div class="col-lg-4">
<h3>2.列表组</h3>
<div class="d-flex justify-content-center mt-3" style="width: auto;">
<ul class="list-group">
<li class="list-group-item active" aria-current="true">第一个列表</li>
<li class="list-group-item">第二个列表</li>
<li class="list-group-item">第三个列表</li>
<li class="list-group-item">第四个列表</li>
<li class="list-group-item">第五个列表</li>
</ul>
</div>
<div class="mt-3 pt-3 pb-3 ps-4">
<code>
<div>
<ul class="list-group">
</div>
<div style="text-indent: 1.5rem;">
<li class="list-group-item active" aria-current="true">
</div>
<div style="text-indent: 3rem;">
第一个列表
</div>
<div style="text-indent: 1.5rem;">
</li>
</div>
<div style="text-indent: 1.5rem;">
<li class="list-group-item">
</div>
<div style="text-indent: 3rem;">
第二个列表
</div>
<div style="text-indent: 1.5rem;">
</li>
</div>
<div style="text-indent: 1.5rem;">
<li class="list-group-item">
</div>
<div style="text-indent: 3rem;">
第三个列表
</div>
<div style="text-indent: 1.5rem;">
</li>
</div>
<div style="text-indent: 1.5rem;">
<li class="list-group-item">
</div>
<div style="text-indent: 3rem;">
第四个列表
</div>
<div style="text-indent: 1.5rem;">
</li>
</div>
<div style="text-indent: 1.5rem;">
<li class="list-group-item">
</div>
<div style="text-indent: 3rem;">
第五个列表
</div>
<div style="text-indent: 1.5rem;">
</li>
</div>
<div>
</ul>
</div>
</code>
</div>
</div>
<!-- 组件3 -->
<div class="col-lg-3">
<h3>3.按钮</h3>
<div class="d-flex justify-content-center mt-3" style="width: auto;">
<button class="btn btn-primary" type="submit">确认</button>
<button class="btn btn-primary ms-3" type="submit">取消</button>
</div>
<div class="mt-3 pt-3 pb-3 ps-4">
<code>
<div>
<div">
</div>
<div style="text-indent: 1.5rem;">
<button class="btn btn-primary" type="submit">
</div>
<div style="text-indent: 3rem;">
确认
</div>
<div style="text-indent: 1.5rem;">
</button>
</div>
<div style="text-indent: 1.5rem;">
<button class="btn btn-primary" type="submit">
</div>
<div style="text-indent: 3rem;">
取消
</div>
<div style="text-indent: 1.5rem;">
</button>
</div>
</code>
</div>
</div>
</div>
</div>
<div class="text-center mt-3">
<h1>
更多前端开源框架
</h1>
</div>
<!-- 图片滚动 -->
<div class="container mt-3">
<div class="tupiangundong">
<ul class="over_img_ul1 tupiangundongimg">
<li class="over_img1 over_img_style"><img src="./img/jqueryapi.png" alt=""></li>
<li class="over_img1 over_img_style"><img src="./img/sass.png" alt=""></li>
<li class="over_img1 over_img_style"><img src="./img/typescript.png" alt=""></li>
<li class="over_img1 over_img_style"><img src="./img/react.png" alt=""></li>
<li class="over_img1 over_img_style"><img src="./img/bootstrap-icons.png" alt=""></li>
</ul>
</div>
<div class="tupiangundong">
<ul class="over_img_ul2 tupiangundongimg">
<li class="over_img2 over_img_style"><img src="./img/stylus.png" alt=""></li>
<li class="over_img2 over_img_style"><img src="./img/lesscss.png" alt=""></li>
<li class="over_img2 over_img_style"><img src="./img/gulpjs.png" alt=""></li>
<li class="over_img2 over_img_style"><img src="./img/preact.png" alt=""></li>
<li class="over_img2 over_img_style"><img src="./img/lodash.png" alt=""></li>
</ul>
</div>
<div class="tupiangundong">
<ul class="over_img_ul3 tupiangundongimg">
<li class="over_img3 over_img_style"><img src="./img/liquid.png" alt=""></li>
<li class="over_img3 over_img_style"><img src="./img/ejs.png" alt=""></li>
<li class="over_img3 over_img_style"><img src="./img/underscore.png" alt=""></li>
<li class="over_img3 over_img_style"><img src="./img/zeptojs.png" alt=""></li>
<li class="over_img3 over_img_style"><img src="./img/browsersync.png" alt=""></li>
</ul>
</div>
</div>
<!-- 固定在右边的菜单popover -->
<div class="div_fixed z-1 ">
<!-- 客服在线 -->
<div class="border-bottom">
<div class="d-flex align-items-center justify-content-center fixed_pic">
<a role="button" class="btn" data-bs-toggle="popover" data-bs-placement="left"
data-bs-custom-class="custom-popover" data-bs-trigger="hover" data-bs-title="在线服务"
data-bs-content="实时解答使用问题">
<img src="./img/kefu.svg" class="fixed_img">
</a>
</div>
</div>
<!-- 帮助中心 -->
<div class="border-bottom">
<div class="d-flex align-items-center justify-content-center fixed_pic">
<a role="button" class="btn" data-bs-toggle="popover" data-bs-placement="left"
data-bs-custom-class="custom-popover" data-bs-trigger="hover" data-bs-title="帮助中心"
data-bs-content="获取使用指南及实践经验">
<img src="./img/commenquestion.svg" class="fixed_img">
</a>
</div>
</div>
<!-- 关注官方 -->
<div class="border-bottom">
<div class="d-flex align-items-center justify-content-center fixed_pic">
<a role="button" class="btn" data-bs-toggle="popover" data-bs-placement="left"
data-bs-custom-class="custom-popover" data-bs-trigger="hover" data-bs-title="致电作者"
data-bs-content="186-5849-1360">
<img src="./img/telphone.svg" class="fixed_img">
</a>
</div>
</div>
<div>
<div class="d-flex align-items-center justify-content-center fixed_pic">
<a role="button" class="btn" data-bs-toggle="popover" data-bs-placement="left"
data-bs-trigger="hover" id="back_top">
<img src="./img/top.svg" class="fixed_img">
</a>
</div>
</div>
</div>
<!-- popover结束 -->
</div>
<!-- 首页内容结束 -->
<!-- 底部开始 -->
<div class="container">
<hr>
<footer class="pt-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>前端探索者</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">首页</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">前端榜单</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">学习攻略</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">软件下载</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">了解更多</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>编辑器推荐</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">VsCode</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">WebStorm</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Sublime</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">KindEditor</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">...</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>框架官方连接</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="https://getbootstrap.com/" target="_blank"
class="nav-link p-0 text-muted">BootStrap</a></li>
<li class="nav-item mb-2"><a href="https://cn.vuejs.org/" target="_blank"
class="nav-link p-0 text-muted">Vue</a></li>
<li class="nav-item mb-2"><a href="https://react.dev/" target="_blank"
class="nav-link p-0 text-muted">React</a></li>
<li class="nav-item mb-2"><a href="https://www.ilayuis.com/" target="_blank"
class="nav-link p-0 text-muted">Layui</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">...</a></li>
</ul>
</div>
<!-- 列偏移 -->
<div class="col-md-5 offset-md-1 mb-3">
<h5>有疑问请私信官方</h5>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">您的邮箱地址</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="1844494570@qq.com">
<small></small>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">请输入</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="d-flex justify-content-end mt-3">
<button class="btn btn-primary" type="submit" id="submit">发送</button>
</div>
</div>
</div>
<hr>
<p class="text-center text-muted">© 2023-12-19 2022080188 Pooh 制作,有事联系18658491360</p>
</footer>
</div>
<!-- 底部结束 -->
<script>
/**
* 鼠标经过列表显示动画
*/
let $WebList = $('#WebList')
let $WebList_Item = $('#WebList_Item')
$WebList.mouseenter(() => $WebList_Item.fadeIn())
$WebList.mouseleave(() => {
$WebList_Item.fadeOut()
})
let $StudyMethodList = $('#StudyMethodList')
let $StudyMethodList_Item = $('#StudyMethodList_Item')
$StudyMethodList.mouseenter(() => $StudyMethodList_Item.fadeIn())
$StudyMethodList.mouseleave(() => $StudyMethodList_Item.fadeOut())
/**
* 固定工具栏 popover bootstrap规定
*/
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
/**
* 点击按钮返回页面顶部
*/
document.querySelector('#back_top').addEventListener('click', () => document.querySelector('body').scrollIntoView({block: 'start'}))
/**
*图片滚动
*/
/*第一行*/
let ul1 = document.querySelector(".over_img_ul1")
ul1.innerHTML = ul1.innerHTML + ul1.innerHTML
let lis1 = document.querySelectorAll(".over_img1")
let spa = -2
ul1.style.width = lis1[0].offsetWidth * lis1.length + 'px'
// 定时器1
setInterval(() => {
if (ul1.offsetLeft < -ul1.offsetWidth / 2) {
ul1.style.left = '0'
}
if (ul1.offsetLeft > 0) {
ul1.style.left = -ul1.offsetWidth / 2 + 'px'
}
ul1.style.left = ul1.offsetLeft + spa + 'px'
}, 15)
/*第二行*/
let ul2 = document.querySelector(".over_img_ul2")
ul2.innerHTML = ul2.innerHTML + ul2.innerHTML
let lis2 = document.querySelectorAll(".over_img2")
ul2.style.width = lis2[0].offsetWidth * lis2.length + 'px'
// 定时器2
setInterval(() => {
if (ul2.offsetLeft < -ul2.offsetWidth / 2) {
ul2.style.left = '0'
}
if (ul2.offsetLeft > 0) {
ul2.style.left = -ul2.offsetWidth / 2 + 'px'
}
ul2.style.left = ul2.offsetLeft + spa + 'px'
}, 10)
/*第三行*/
let ul3 = document.querySelector(".over_img_ul3")
ul3.innerHTML = ul3.innerHTML + ul3.innerHTML
let lis3 = document.querySelectorAll(".over_img3")
ul3.style.width = lis3[0].offsetWidth * lis3.length + 'px'
//定时器3
setInterval(() => {
if (ul3.offsetLeft < -ul3.offsetWidth / 2) {
ul3.style.left = '0'
}
if (ul3.offsetLeft > 0) {
ul3.style.left = -ul3.offsetWidth / 2 + 'px'
}
ul3.style.left = ul3.offsetLeft + spa + 'px'
}, 20)
//4.懒加载 API 注册一个回调函数来观察特定元素的交叉状态变化，并在满足条件时执行相应的操作。
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) { // 目标元素出现在 root 可视区，返回 true
//监听到了添加样式
entry.target.classList.add("actived")
} else {
entry.target.classList.remove("actived")
}
})
})
const hiddenElement = document.querySelectorAll(".flag")
hiddenElement.forEach((el) => observer.observe(el))
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
