这个音量条有问题【请马老出山】
本帖最后由 亚伦影音工作室 于 2025-2-6 12:15 编辑 <br /><br /><style type="text/css">#yinkong{margin: 0px 40px ; width: 350px; position: relative; overflow: hidden; align-items: center;}
#lb{margin: 3px 4px ; width: 24px; height: 24px; position: absolute; cursor: pointer; }
#cndpt{position: absolute; width: 24px; height: 24px;
opacity:1; }
#enopg{ position: absolute;width: 24px; height: 24px;
opacity:0; }
#auVol {position: position: absolute;
width:300px;
margin: 12px 38px;
height:3px;
border:1px solid;
background:#ccc linear-gradient(90deg, #800000, #800000) no-repeat;
cursor:pointer;
border-radius: 20px;
}
</style>
<div id="yinkong" >
<div id="lb" title="静音/音量">
<div id="cndpt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#880000" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" />
</svg></div>
<div id="enopg" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#880000" fill-rule="evenodd" d="M0 7.667v8h5.333L12 22.333V1L5.333 7.667" />
</svg></div>
</div>
<div id="auVol"></div>
</div>
<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1942740960.mp3" autoplay="autoplay" loop="loop" ></audio></p>
<script language="javascript">
var auVol = document.getElementById('auVol'); //音量模拟条标识
var aud = document.getElementById('aud'); //audio元素标识
var canDo = false; //拖动布尔标识
auVol.style.backgroundSize = aud.volume *80 + "%"; //音量条初始状态
auVol.onmousemove = function(){ //音量控制
if(canDo) { // 如果鼠标已经按下
let w = offset(auVol,"left");
let x = (event.clientX - w) * 100 / this.clientWidth;
this.style.backgroundSize = x + "%";
//console.log(x);
aud.volume = x / 100;
}
}
//几个鼠标动作事件：控制 canDu 布尔值
auVol.onmousedown = function(){ canDo = true; }
auVol.onmouseout = function(){ canDo = false; }
auVol.onmouseup = function(){ canDo = false; }
function offset(obj,direction){//位移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
lb.onclick = () => aud.paused ? (aud.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',auVol.style.backgroundSize = aud.volume *80 + "%") : (aud.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',auVol.style.backgroundSize = aud.volume *0 + "%");
</script > 本帖最后由 亚伦影音工作室 于 2025-2-6 09:32 编辑
最大问题是拖动音量条处于静音状态时喇叭不能是原始状态！ 好像拖动进度条歌曲歌曲不能同步发生变化呢。 红影 发表于 2025-2-6 12:06
好像拖动进度条歌曲歌曲不能同步发生变化呢。
这个是音量控制条和音乐进度条不同。亲看清楚啊！ 亚伦影音工作室 发表于 2025-2-6 12:13
这个是音量控制条和音乐进度条不同。亲看清楚啊！
哦，我弄错了{:4_173:}
页:
[1]