怎么点击进度条的不同位置在当前位置创建div？
上面是一个audio插件wavesurfer.js。下面有个灰色的进度条，现在点击进度条任意位置即可在当前位置创建一个div（红色圈圈区域），点击x可以删除此div，并且拖动双向箭头可以来回拖动，如果所示。我现在写的结果是点击任意位置只显示一个都叠在一起，怎么解决？
具体效果可以参考网站：
https://biao.jd.com/school/sc...
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/default.css">
<style>
.waveform-cont {
width: 900px;
margin: auto;
overflow: auto;
height: 240px;
border: 1px solid #ccc;
padding-top: 40px;
border-radius: 3px;
}
.waveform {
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
height: 128px;
overflow: hidden;
line-height: 128px;
}
.waveform-main {
border-radius: 15px;
height: 15px;
background: #eee;
cursor: pointer;
margin-top: 5px;
position: relative;
}
.waveform-main b {
position: absolute;
width: 0;
height: 15px;
right: 0;
bottom: 0;
left:0;
/* border-radius: 15px; */
background: rgba(0, 255, 0, 0.4);
}
.waveform-main div {
height: 15px;
width: 100%;
position: relative;
z-index: 8;
}
.waveform-main-div {
position: relative;
height: 0;
}
.data-val {
margin: 10px auto 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
overflow: auto;
max-height: 280px;
position: relative;
}
.data-val-role {
min-height: 52px;
border: 1px solid #ccc;
margin-bottom: 10px;
line-height: 50px;
padding: 0 10px;
}
.waveform-log {
position: absolute;
width: 0;
left: 0;
top: 0;
z-index: 90;
}
.waveform-cont .tag1 {
width: 38px;
height: 17px;
border: 1px solid #09F;
position: absolute;
background-color: #FFF;
left: -19px;
top: 5px;
line-height: 15px;
font-size: 10px;
color: #333;
text-align: center;
overflow: hidden;
padding: 0;
border-radius: 3px;
cursor: pointer;
}
.waveform-cont .tag2 {
width: 38px;
height: 17px;
border: 1px solid #00d727;
position: absolute;
background-color: #00d727;
left: -19px;
top: -184px;
line-height: 15px;
font-size: 10px;
color: #fff;
text-align: center;
overflow: hidden;
padding: 0;
border-radius: 3px;
}
.waveform-cont .tag2 {
border: 1px solid #fff !important;
}
.waveform-log .line-add {
position: absolute;
width: 1px;
height: 150px;
left: 0;
bottom: 0;
background: #0f0;
}
.waveform-log .icon-times {
position: absolute;
width: 15px;
height: 15px;
border-radius: 15px;
left: -7px;
bottom: 150px;
background: #f00;
color: #fff;
text-align: center;
line-height: 14px;
font-size: 8px;
cursor: pointer;
}
.waveform-log .icon-arrows-h {
position: absolute;
width: 15px;
height: 15px;
border-radius: 15px;
left: -7px;
bottom: 0;
background: #9a9a9a;
color: #fff;
text-align: center;
line-height: 14px;
font-size: 8px;
z-index: 10;
cursor: pointer;
}
.icon-times:after {
content:'\2716';
display: block;
}
.icon-arrows-h::after{
content:'\2194';
display: block;
font-size:15px;
margin:-1px auto;
}
</style>
</head>
<body>
<div style="width: 900px;margin:20px auto">
<div class="waveform-cont" mlength="25.26">
<div class="waveform" id="waveform" style="width: 1136.7px;"></div>
<div class="waveform-main" style="width: 1136.7px;">
<b></b>
<div></div>
</div>
<div class="waveform-main-div" id="waveform-main-div" style="width: 1136.7px;">
<!-- <div class="waveform-log log-1">
<div class="tag1"></div>
<div class="tag2"></div>
<span class="line-add"></span>
<span class="icon-times"></span>
<span class="icon-arrows-h"></span>
</div> -->
</div>
</div>
<ul class="data-val"></ul>
<div class="data-val-role"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script>
$(function(){
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#006699',
progressColor: '#009999',
cursorColor:'red',
barHeight:'0.5'
});
var i=false;
$("#waveform").click(function(){
i=!i;
if(i){
wavesurfer.play();
}else{
wavesurfer.stop();
}
})
wavesurfer.load('HoldOn.mp3');
var statu = false,
ox = 0,
lx = 0,
left = 0,
bgleft = 0;
// var num=1;
$(".waveform-main").on("click",function(e){
var num=$(".waveform-main").data("num");
num =num ? num : 1;
var str="<div class='waveform-log log-"+num+"' data-val='"+num+"'>"+
"<div class='tag1'>"+num+"</div>"+
"<div class='tag2'></div>"+
"<span class='line-add'></span>"+
"<span class='icon-times'></span>"+
"<span class='icon-arrows-h'></span>"+
"</div>";
if(!statu){
bgleft = $(".waveform-main").offset().left;
left = e.pageX - bgleft;
if(left < 0){
left = 0;
}
if(left > 1136.7){
left = 1136.7;
}
$(str).appendTo(".waveform-main-div");
num+=1;
$(".waveform-main").data("num",num);
$(".waveform-log").css("left",left);
$(".waveform-main b").width(left);
}
$(".icon-arrows-h").mousedown(function(e){
lx = $(this).offset().left;
ox = e.pageX - left;
statu = true;
});
$(document).mouseup(function(){
statu = false;
});
$(".waveform-cont").mousemove(function(e){
if(statu){
left = e.pageX - ox;
// left = e.pageX - bgleft;
if(left < 0){
left = 0;
}
if(left > 1136.7){
left = 1136.7;
}
$(".waveform-log").css('left',left);
$(".waveform-main b").width(left);
}
});
});
$("")
})
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
楼主你这个问题解决了吗，能不能请教一下，我也在写这个 我微信zr2545495010