当前位置: 首页 > 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>

http://www.lryc.cn/news/429395.html

相关文章:

  • 显示弹出式窗口的方法
  • Java-什么是缓存线程池?
  • esbuild中的Binary Loader:处理二进制文件
  • 深度好文:从《黑神话:悟空》看未来游戏趋势:高互动性、个性化与全球化
  • 【中项第三版】系统集成项目管理工程师 | 第 12 章 执行过程组
  • C语言自动生成宏定义枚举类型和字符串
  • C#单例模式
  • 10-使用sentinel流控
  • redis AOF机制
  • Day 21代码|随想录| 二叉树完结撒花,今日刷题669.修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.吧二叉搜索树转换为累加树
  • cmake教程一
  • 3D场景标注标签信息,three.js CSS 2D渲染器CSS2DRenderer、CSS 3D渲染器CSS3DRenderer(结合react)
  • C++参悟-单例模式
  • 【题解】—— LeetCode一周小结32
  • 详解线索分层的目的、维度与创新实践
  • 于8月21号的回顾
  • Abstract Class抽象类
  • webrtc ns 降噪之粉红噪声参数推导
  • IO进程线程8月21日
  • Web安全:SqlMap工具
  • 用手机写一本电子书
  • 【网络编程】基于UDP的TFTP文件传输
  • Vue 3 + Pinia 实现网页刷新功能
  • DVWA综合靶场漏洞讲解
  • 实现Bezier样条曲线
  • MySQL中的EXPLAIN的详解
  • LearnOpenGL——SSAO学习笔记
  • [C语言]-基础知识点梳理-文件管理
  • pcdn闲置带宽被动收入必看教程。第五讲:光猫更换和基础设置
  • 工业数据采集网关简介-天拓四方