原生实现slider滑块

最新推荐文章于 2023-04-04 14:51:00 发布

不怕秃头的程序媛

最新推荐文章于 2023-04-04 14:51:00 发布

阅读量768

点赞数 1

分类专栏：项目Demo 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/weixin_47777489/article/details/119303789

版权

这篇博客详细介绍了如何利用JavaScript原生方法offsetWidth、offsetLeft和clientX属性实现滑块组件。通过理解元素的宽度计算及鼠标相对位置，读者可以掌握创建交互式滑动条的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键点

offsetWidth 获取当前节点的宽度（width + border + padding）

offsetLeft 获取的是相对于父对象的左边距

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。

在这里插入图片描述

html

	  <div class="content">
	    <p>0%</p>
	    <div class="bar">
		    <div class="progress"></div>
		    <div class="dot"></div>
	    </div>
  </div>

css

   .content {
   
      width: 500px;
      height: 80px;
      margin: 100px auto;
      position: relative;
    }
      
    .bar {
   
      width: 500px;
      height: 12px;
      border-radius: 10px;
      background: #e4e7ed;
      position: absolute;
      top:

最低0.47元/天解锁文章