拖动进度条效果完整demo代码全（jq百分比）

就像风1样

于 2019-08-06 10:16:56 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery 拖动进度条

本文链接：https://blog.csdn.net/qq_42221334/article/details/98592302

该博客提供了使用jQuery实现拖动进度条的完整代码示例，详细展示了如何通过交互操作实现进度条的动态更新，达到百分比显示的效果。

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

完整代码：


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <title> jq拖动进度条效果百分比 </title>
	
</head>
<style>
*{margin:0}
</style>
<body>
 
<div id="d1" name="wrap" style="width:300px;height:60px; border: 1px solid #000;margin-top:20px;" >
    <div id="bg" style="float: left;width: 80px;height: 60px;background-color: #e4b54c;"></div>
    <div id="drag" style="float: left;width: 20px;height: 60px;background-color: #78ba54;"οnmοuseοver="this.style.cursor='pointer'"></div>
	<p id="p1"style="clear:both;">水平坐标：</p>
	<p id="p2">