在页面做一个可拖动的进度条

最新推荐文章于 2020-11-11 23:43:49 发布

75闪光雷

最新推荐文章于 2020-11-11 23:43:49 发布

阅读量4.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_34309305/article/details/77481525

版权

这篇博客展示了如何使用HTML、CSS和jQuery创建一个可拖动的进度条。通过设置样式和添加事件监听，实现了进度条的拖动功能，当鼠标按下并移动时，进度条会随之改变，并显示相应的百分比。代码示例详细说明了实现过程。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>进度条 学习</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <style>
        .progress{position: relative; width:300px;margin:100px auto;}
        .progress_bg{height: 10px; border: 1px solid #ddd; overflow: hidden;background-color:#f2f2f2;}
        .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
        .progress_btn{width: 10px; height: 20px; position: absolute;background:blue; 
        left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
        .progress_btn:hover{border-color:#F7B824;}
    </style>
</head>
<body>
    <div class="progress">
        <div class="progress_bg">
            <div class="progress_bar"></