请亚伦老师让动态图的雪以及背景音乐实现暂停，谢谢【已解决】
本帖最后由 杨帆 于 2025-2-25 22:45 编辑 <br /><br /><style>#papa { margin: 100px 0 20px calc(50% - 721px); background:url('https://cccimg.com/view.php/61a61aacef386c6ce9240b454f741e7b.gif') no-repeat center/cover;width: 1280px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; --showbackface: visible;}
#dt{
position:absolute;
width: 100%;
height: 100%;
top:0%;
left: 0%; }
#dt img{width: 100%;
height: 100%;
}
#vid {width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none; -webkit-mask: radial-gradient(transparent 10%, red);
}
#bfq{height: 40px; width:96%; position: relative;left: 0%; top: 45%;overflow: hidden; background:url('https://pic1.imgdb.cn/item/66c40607d9c307b7e912340a.png') no-repeat center/cover; border-radius: 6px;box-shadow: 0px 0px 0px 0.25px #fff;z-index: 1;}
#mboard { height: 40px; width:100%;justify-content: center; align-items: center; gap: 8px; position: absolute;display: flex;left: -5%;}
#mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
#tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;color: #eee; }
#volwrap { position: absolute; width: 120px; height: 40px; right: -40px; display: grid; place-items: center; background: none; border-radius: 20px; }
input {
-webkit-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background-color: transparent;
width: 100%;
}
::-webkit-slider-runnable-track {
height: 4px;border-radius: 20px;
background: #eee;
}
::-webkit-slider-container {
height: 18px;border-radius: 30px;
overflow: hidden;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #f44336;
border: 1px solid transparent;
margin-top: -4px;
border-image: linear-gradient(#f44336,#f44336) 0 fill / 5 11 5 0 / 0px 0px 0 2000px;
}
#btnMute:hover ~ #volwrap ;
#volume { position: absolute; width: 40px; height: 2px;display: none; }
#prog { --track:#eee; --prog: #ff0000; --prg: 0%; width: 900px; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; border-radius: 20px;}
</style>
<div id="papa">
<div id="dt">
<img src="https://cccimg.com/view.php/61a61aacef386c6ce9240b454f741e7b.gif"id="IMG" />
</div>
<div id="bfq">
<div id="mboard">
<img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
<span id="tMsg1">00:00</span>
<span id="prog"></span>
<span id="tMsg2">00:00</span>
<img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
<div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
</div>
</div>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/11/18/13/05/video6731d8b109dda.mp4" autoplay loop muted></video>
</div>
<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1897619570.mp3" autoplay loop></audio></p>
<p> <audio id="aud1" src="https://music.163.com/song/media/outer/url?id=563019146.mp3" autoplay loop></audio></p>
<script>
var lastVolume = 1, muted = false;
var imgAr = [
'https://638183.freep.cn/638183/web/icon/play.svg',
'https://638183.freep.cn/638183/web/icon/pause.svg',
'https://638183.freep.cn/638183/web/icon/unmuted.svg',
'https://638183.freep.cn/638183/web/icon/muted.svg',
];
var setVolume = (val) => Math.min(1, Math.max(0, val));
var setMute = () => {
if(lastVolume === 0) return;
muted = !muted;
muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};
var s2m = (seconds) => {
const secs = Math.floor(seconds || 0);
return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};
var mState = () => {
btnPlay.src = aud.paused ? imgAr : imgAr;
btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};
document.addEventListener('keydown', e => {
if(!e.altKey) return;
switch (e.keyCode) {
case 88:
btnPlay.click();
break;
case 74:
setMute();
break;
case 187: case 107:
aud.volume = setVolume(aud.volume + 0.1);
lastVolume = aud.volume;
break;
case 189: case 109:
aud.volume = setVolume(aud.volume - 0.1);
lastVolume = aud.volume;
break;
default:
return;
}
});
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
tMsg1.innerText = s2m(aud.currentTime);
tMsg2.innerText = s2m(aud.duration);
};
aud.onvolumechange = () => {
btnMute.src = aud.volume === 0 ? imgAr : imgAr;
volume.value = aud.volume;
}
btnPlay.onclick = () => aud.paused ? (aud.play(),image.play(),aud1.play(),vid.play()): (aud.pause(),image.stop(),aud1.pause(),vid.pause());
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 洢canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
//
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
//
var width = this.width, height = this.height;
if (width && height) {
// 洢
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvasС
canvas.width = width;
canvas.height = height;
//
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
//
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
//
this.removeAttribute('src');
// canvas
canvas.style.position = 'absolute';
//
this.parentElement.insertBefore(canvas, this);
//
this.style.opacity = '0';
// 洢canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("IMG");
</script> 还有按钮也无法点击，预览可以呀，请亚伦老师指导、帮助解决！谢谢{:4_191:}@亚伦影音工作室 杨帆 发表于 2025-2-25 15:54
还有按钮也无法点击，预览可以呀，请亚伦老师指导、帮助解决！谢谢@亚伦影音工作室
夜里上网解决，一个视频，一个是动图！ 亚伦影音工作室 发表于 2025-2-25 16:01
夜里上网解决，一个视频，一个是动图！
好的，老师先忙，辛苦老师您了{:4_190:} 背景图宏伟气派，欣赏点赞！{:4_199:} 梦江南 发表于 2025-2-25 17:06
背景图宏伟气派，欣赏点赞！
是啊，值得欣赏，背景图是游侠老师的大作 制作很漂亮，只是无法点击按钮呢{:4_187:} 杨帆要注意图层的层次 红影 发表于 2025-2-25 20:15
制作很漂亮，只是无法点击按钮呢
是，正在请教亚伦老师呢 小辣椒 发表于 2025-2-25 21:01
杨帆要注意图层的层次
谢谢小辣椒！该怎么注意呢？图层的层次指什么呀？ 杨帆 发表于 2025-2-25 21:10
是，正在请教亚伦老师呢
嗯嗯，我们也可以跟在后面学习一下了{:4_187:} 红影 发表于 2025-2-25 22:02
嗯嗯，我们也可以跟在后面学习一下了
是，好好学习，不断进步{:4_187:} 本帖最后由 亚伦影音工作室 于 2025-2-25 22:19 编辑
由于你音画缺的东西太多只好做个完整 attach://46706.rar 亚伦影音工作室 发表于 2025-2-25 22:17
由于你音画缺的东西太多只好做个完整 attach://46705.rar
收到，学习一下，老师您辛苦了！谢谢亚伦老师{:4_190:} 哇，完美实现了动图、视频、多音频一键控制，化腐朽为神奇哇！
在论坛"帖子制作"上测试正常，不清楚为何在您的工作室HTML编辑浏览器上测试，还是无法点击呢
老师您太厉害了！为亚伦老师点赞！{:4_190:} 杨帆 发表于 2025-2-25 22:05
是，好好学习，不断进步
杨帆已经挺厉害了，还在学习，很赞{:4_187:} 红影 发表于 2025-2-26 21:16
杨帆已经挺厉害了，还在学习，很赞
呵呵，过奖了，我还是小白一个呢，一起学习，天天向上{:4_204:} 杨帆 发表于 2025-2-26 21:27
呵呵，过奖了，我还是小白一个呢，一起学习，天天向上
这个里面的朗诵声音倒是很好呢。{:4_187:} 红影 发表于 2025-2-26 23:02
这个里面的朗诵声音倒是很好呢。
是，这个还行 杨帆 发表于 2025-2-26 23:38
是，这个还行
那个是不是也参照这个？
页:
[1]
2