当前位置: 首页 > news >正文

原生js实现下滑到当前模块进度条填充

<div style="height: 1500px;"></div>
<div class="progress-container"><div class="progress-bar" data-progress="90%"><p class="progress-text">Google Ads在Google搜索引擎上覆盖超过90%的互联网用户。</p></div><p class="progress-tag">90%</p><div class="progress-bar" data-progress="60%"><p class="progress-text">超过2/3的潜在用户会被精准定位的Google Ads付费广告所吸引,点进进入。</p></div><p class="progress-tag">2/3</p><div class="progress-bar" data-progress="90%"><p class="progress-text">覆盖全球超过200万个网站和应用,可触及到网上90%的互联网用户。</p></div><p class="progress-tag">200w+</p></div><style>.progress-container {margin: 50px 0;
}.progress-bar {width: 80%;height: 80px;background-color: #ffffff;border-radius: 5px;/* overflow: hidden; */position: relative;margin-bottom: 20px;display: inline-block;margin-right: 30px;
}.progress-bar::before {content: '';position: absolute;left: 0;top: 0;height: 100%;width: var(--progress-width, 0); /* 使用CSS变量 */background-color: #000000;transition: width 2s ease;border-radius: 5px 0 0 5px;
}
.progress-text{position: relative;z-index: 1;margin: 0;line-height: 30px;font-size: 16px;white-space: normal;color: #ffffff;width: 55%;text-align: left;margin-top: 10px;margin-left: 15px;
}
.progress-tag{width: 80px;height: 80px;padding: 20px;font-weight: 700;display: inline-block;margin: 0;border-radius: 50%;color: #ffffff;background-color: #000000;text-align: center;line-height: 40px;margin-bottom: 20px;
}@media screen and (max-width:768px) {.progress-container {margin: 50px 10px;}.progress-bar {width: 68%;margin-right: 20px;}.progress-text {line-height: 18px;font-size: 12px;width: 55%;}.google-six-content ul li h3 {width: 150px;height: 150px;line-height: 130px;}
}</style><script>
document.addEventListener('DOMContentLoaded', function() {var progressBars = document.querySelectorAll('.progress-bar');document.addEventListener('scroll', function() {var windowHeight = window.innerHeight;progressBars.forEach(function(bar) {var rect = bar.getBoundingClientRect();if (rect.top < windowHeight) {var progress = bar.getAttribute('data-progress');bar.style.setProperty('--progress-width', progress);}});});
});</script>

相关文章:

原生js实现下滑到当前模块进度条填充

<div style"height: 1500px;"></div> <div class"progress-container"><div class"progress-bar" data-progress"90%"><p class"progress-text">Google Ads在Google搜索引擎上覆盖超过90%的互…...

显示弹出式窗口的方法

文章目录 1. 概念介绍2. 使用方法3. 示例代码 我们在上一章回中介绍了Sliver综合示例相关的内容&#xff0c;本章回中将介绍PopupMenuButton组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的PopupMenuButton组件位于AppBar右侧&#xf…...

Java-什么是缓存线程池?

什么是缓存线程池? 缓存线程池 (CachedThreadPool) 是一种特殊的线程池,它能够动态地调整线程的数量,以适应任 务的需求。这种线程池非常适合处理大量短暂的任务,因为它会根据任务的数量自动增加或减少线 程的数量。 缓存线程池的特点: 线程数量动态调整:缓存线程池…...

esbuild中的Binary Loader:处理二进制文件

在前端或Node.js项目中&#xff0c;有时需要处理二进制文件&#xff0c;如图片、音频、视频或其他非文本资源。esbuild提供了一款名为Binary Loader的插件&#xff0c;它能够在构建时将二进制文件加载为二进制缓冲区&#xff0c;并使用Base64编码将其嵌入到打包文件中。在运行时…...

深度好文:从《黑神话:悟空》看未来游戏趋势:高互动性、个性化与全球化

引言 在数字时代的浪潮中&#xff0c;游戏产业以其独特的魅力和无限的可能性&#xff0c;成为了全球娱乐文化的重要组成部分。随着科技的飞速发展&#xff0c;特别是高性能计算和人工智能技术的突破&#xff0c;游戏的世界变得越来越真实、细腻且富有深度。而在这股技术洪流中…...

【中项第三版】系统集成项目管理工程师 | 第 12 章 执行过程组

前言 本章属于10大管理的内容&#xff0c;上午题预计会考8-10分&#xff0c;下午案例分析也会进行考查。学习要以教材为主。 目录 12.1 指导与管理项目工作 12.1.1 主要输入 12.1.2 主要输出 12.2 管理项目知识 12.2.1 主要输入 12.2.2 主要输出 12.3 管理质量 12.3.…...

C语言自动生成宏定义枚举类型和字符串

#include <stdio.h>// 定义错误枚举 #define ERROR_LIST(e) \e(SUCCESS) \e(FAILURE) \e(NOT_FOUND) \e(TIMEOUT)// 使用宏生成枚举 #define GENERATE_ENUM(ENUM) ENUM, typedef enum {ERROR_LIST(GENERATE_ENUM) } ErrorCode;// 使用宏生成字符串数组…...

C#单例模式

&#xfeff;using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace _3._3._6_单例模式 {public class Singleton{private static Singleton s_instance;private int _state;private Singleton(int …...

10-使用sentinel流控

本文介绍sentinel的直接流控的使用。 0、环境 jdk 1.8sentinel 1.8.2springboot 2.4.2 1、sentinel环境搭建 从官方发布的网站上下载: sentinel Jar&#xff0c;下载对应版本。 下载完成后&#xff0c;进入刚才下载的Jar文件所在的目录&#xff0c;执行如下命令&#xff1a…...

redis AOF机制

在redis运行期间&#xff0c;不断将redis执行的写命令写到文件中&#xff0c;redis重启之后&#xff0c;只要将这些命令重复执行一遍就可以恢复数据。因为AOF只是将少量的写命令写入AOF文件中&#xff0c;因此其执行效率高于RDB&#xff0c;开启AOF即使Redis发生故障&#xff0…...

Day 21代码|随想录| 二叉树完结撒花,今日刷题669.修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.吧二叉搜索树转换为累加树

提示&#xff1a;DDU&#xff0c;供自己复习使用。欢迎大家前来讨论~ 文章目录 二叉树 Part06二、题目题目一&#xff1a;669.修剪二叉搜索树解题思路&#xff1a;递归法迭代法&#xff1a; 题目二&#xff1a; 108.将有序数组转换为二叉搜索树解题思路递归法&#xff1a;迭代…...

cmake教程一

1. Start 1.1 构建简单工程 cmake_minimum_required(VERSION 3.0) project(Step1) add_executable(Step1 main.cpp)设置cmake最低版本要求设置工程名字设置工程生成可执行程序 2. 声明 C Standard set(CMAKE_CXX_STANDARD 11) set(CMAKE_CXX_STANDARD_REQUIRED True)如果我…...

3D场景标注标签信息,three.js CSS 2D渲染器CSS2DRenderer、CSS 3D渲染器CSS3DRenderer(结合react)

如果你想用HTML元素作为标签标注三维场景中模型信息&#xff0c;需要考虑定位的问题。比如一个模型&#xff0c;在代码中你可以知道它的局部坐标或世界坐标xyz&#xff0c;但是你并不知道渲染后在canvas画布上位置&#xff0c;距离web页面顶部top和左侧的像素px值。自己写代码把…...

C++参悟-单例模式

单例模式 一、概述1. 特点2. 实现方式3. 应用场景 二、实现代码1. 静态局部变量的懒汉单例2. 加锁的懒汉式单例3. 使用 C11 中的 std::call_one 的懒汉单例4. 饿汉式单例 一、概述 这里记录一下单例模式的最常用使用&#xff0c;单例模式&#xff08;Single Pattern&#xff0…...

【题解】—— LeetCode一周小结32

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结31 5.不含连续1的非负整数 题目链接&#xff1a;600. 不含连续…...

详解线索分层的目的、维度与创新实践

线索分层是一个系统性的过程&#xff0c;旨在更有效地管理、跟踪和利用线索资源。这一过程可以借鉴多种策略和方法&#xff0c;特别是在用户运营和市场营销中。 1、线索分层的目的 线索分层的主要目的是根据线索的不同特征或成熟度&#xff0c;将其分类管理&#xff0c;以便更…...

于8月21号的回顾

傍晚的日落和逐渐深邃的夜&#xff0c;驱散了白天的极致闷热。倦怠和疲惫充斥着大脑&#xff0c;喧嚣的浮沉又在耳边轰鸣。 我不曾想到&#xff0c;再次打开博客已经是两年后的今天了。手指轻轻滑过鼠标&#xff0c;博客的页面缓缓加载&#xff0c;那些被时间尘封的记忆瞬间涌…...

Abstract Class抽象类

抽象类&#xff08;Abstract Class&#xff09;在面向对象编程中是一种特殊的类&#xff0c;它不能被实例化&#xff0c;即不能创建该类的对象。抽象类主要用于定义一组接口&#xff08;即方法&#xff09;&#xff0c;这些方法的具体实现由子类来完成。抽象类通常用于表示一种…...

webrtc ns 降噪之粉红噪声参数推导

webrtc中降噪中&#xff0c;前50帧需要进行简单噪声估计&#xff0c;使用白噪声和粉红噪声模型估算。 首先我们 复习 有色噪声&#xff08;包含白噪声&#xff09;的一般模型&#xff1a; S(f) 是频率 f 处的功率谱密度。f是频率。α 是一个频谱指数&#xff0c;通常在1左右。…...

IO进程线程8月21日

1&#xff0c;思维导图 2&#xff0c;登录 #ifndef __LOG_H__ #define __LOG_H__ #include<myhead.h> typedef struct {char name[20];char pwd[20]; }str;int regist();int login(); #endif#include"log.h" int login() {char a[20]"\n";str p,s;…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...