玩动图【一键控制】
本帖最后由 亚伦影音工作室 于 2025-2-21 22:18 编辑 <br /><br /><style type="text/css">#papa{left: -42%; top: 30%; width:1186px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:#000 linear-gradient(0deg, #000 2%,#000 8%,rgba(2, 2, 2, 0) 10%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%),url() no-repeat center/cover;position: relative;}
#dt{
position:absolute;z-index: 1;
width: 100%;
height: 100%;
top:0%;
left: 0%; }
#dt img{width: 100%;
height: 100%;
}
#ppm{position: absolute; width: 100%; height: 100%; opacity:1; z-index: 1;
background:url(https://pic1.imgdb.cn/item/67aefe6cd0e0a243d4ff228d.png)no-repeat center/100% 100%; border-radius: 0px;
bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;bottom: 0;background:url(https://pic1.imgdb.cn/item/67aefd3fd0e0a243d4ff2222.png)no-repeat center/100% 100%;}
#bnt{left: 0px;bottom: 6px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer;}
#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
width:25px;
height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
clip-path: polygon(75% 50%, 0 0, 0 100%);
width:25px;
height: 25px;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px; bottom:14px; cursor: pointer;right:1%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
#sjd {left: 4%;z-index: 8;width: 70%; height: 25px; transform:scale(1);bottom: 12px;
position: absolute; align-items: center;}
#percentage{margin:0px 35px;
position: relative;border-radius: 20px;
width: 85%; height: 5px;border-radius: 20px;
}
#duration{margin: 0px 0px;color: #eee;font: 400 14px sans-serif;position: absolute;
}
#currentTime{margin: 0px -20px;color: #eee;font: 400 14px sans-serif;position: absolute;
}
#yink {left: 70%;bottom: 4px;width: 40%;height: 50px;z-index: 8; transform:scale(.8);
position: absolute;overflow: hidden; align-items: center; background:#0000; border-radius: 10px;}
#volumeSlider{margin: 20px 42px;
position: absolute;z-index: 40;
width: 55%; height: 5px;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;
}
#loopbnt{ z-index: 91;
position:absolute;
width: 25px;
height: 20px;background:#0000;
bottom: 18px;border-radius: 0px;
left: 71%;filter:invert(100%)hue-rotate(180deg);
cursor: pointer;
}
#swithimg{margin: 12px 10px;filter:invert(90%)hue-rotate(0deg);z-index: 41;
position: absolute;}
.gc{position: absolute;width:100%;
top: 2%;z-index: 21;
left: 0%;
text-align: center;
list-style-type: none;
height: 200px;
line-height: 30px;
}
.lrc{
width: 500px;
height: 140px;
overflow: hidden;bottom: 80px;
display: block; position:absolute;;z-index: 5;
margin: 0px 40%;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 30px;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
color: #000078;
font-weight: normal;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
</style>
<div id="papa">
<div id="dt">
<img src="https://xlaj.cn/upfile/2025/02/19/7F.gif"id="IMG" />
</div>
<div id="ppm"></div>
<div id="ppcm" ></div>
<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="sjd">
<span id="duration"></span> <input type="range" min="0" max6="100" step="0.01" value="0" onchange="seek(this.value)"id="percentage"><span id="currentTime"></span>
</div>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
<div id="yink">
<img src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png" height="30" width="30" id="swithimg">
<inputtype="range" min="0" max="1" step="0.3" value="0.9" id="volumeSlider">
</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
<div class="gc">
<marquee id="marquee"scrollAmount=10 width=1486 height=100 > <font face="heiti" size="4" color="#eee"><p style="text-align: left;">亚伦影音《比春更娇艳》动图/歌曲地址来源：小辣椒演 唱：李玲玉 歌词整理：小辣椒出品：亚伦影音工作室 </p></font></marquee>
</div>
</div>
</div>
<audio src="https://xlaj.cn/upfile/2025/02/19/qaqa.mp3" id="aud"autoplay ></audio>
<script>
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
aud.volume =volumeSlider.value;
});
var aud= document.getElementById("aud");
function muteAudio() {
aud.muted= true;
}
function unmuteAudio() {
aud.muted= false;
}
window.onload = function(){
var swithimg = document.getElementById("swithimg");
var mm = true;
swithimg.onclick= function(){
if (mm == true) { muteAudio();volumeSlider.value=0;
swithimg.src="https://pic1.imgdb.cn/item/67a8b6afd0e0a243d4fd95f3.png";
return mm=false;
}else{unmuteAudio(); volumeSlider.value=0.8;
swithimg.src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png";
return mm=true;
}
};
};
class AudioPlayer {
constructor(audioElement) {
this.audio = audioElement;
}
getTime() {
const currentTime = this.audio.currentTime; // 当前时长
const duration = this.audio.duration; // 总时长
const percentage = duration ? (currentTime / duration) * 100 : 0;
return {
currentTime: currentTime,
duration: duration,
percentage: percentage
};
}
}
let audio = document.getElementById('aud');
let player = new AudioPlayer(audio);
// 回显播放时间
function updateTime() {
const time = player.getTime();
document.getElementById('currentTime').innerHTML = formatTime(time.currentTime);
document.getElementById('duration').innerHTML = formatTime(time.duration);
document.querySelector('input').value = time.percentage;
}
// 格式化播放时间
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}
// 步进器控制播放进度
function seek(percentage) {
const duration = player.getTime().duration;
player.audio.currentTime = duration * (percentage / 100);
}
setInterval(updateTime, 1000);
// 按钮全控
bnt.onclick = () => aud.paused ? (aud.play(),marquee.start(),image.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '1') : (aud.pause(),marquee.stop(),image.stop(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '1',ppm.style.opacity = '0');
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
//全屏
let fs= true;
fullscreen.onclick = () => {
fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
fs = !fs;
}
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
</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>
<script >
var lrc = `恰恰舞曲 - 比春更娇艳
演唱：李玲玉
春天里多么诗意
景色惹人迷
微风轻轻吹开花
纯洁又高贵
爱的花朵不枯萎
大地在欢笑
我和你多逍遥
我俩爱情诞生了
比春更娇艳
。。。。。
春天里多么诗意
景色若人迷
高高情深一粒水
深情永不灭
我俩常在鱼身边
大地在欢笑
我和你多逍遥
我俩爱情诞生了
比春更娇艳
。。。。。。
春天里多么诗意
景色若人迷
微风轻轻吹开花
纯洁又高贵
爱的花朵不枯萎
大地在欢笑
我和你多逍遥
我俩爱情诞生了
比春更娇艳
。。。。。。。
春天里多么诗意
景色若人迷
微风轻轻吹开花
纯洁又高贵
爱的花朵不枯萎
大地在欢笑
我和你多逍遥
我俩爱情诞生了
比春更娇艳
谢谢欣赏
`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script >
完美控制！谢谢亚伦老师精彩分享{:4_191:} 这是把小辣椒那个帖子变得动图可控了呢，真好{:4_187:}
@小辣椒 亲爱的快来看啊{:4_173:} 欣赏亚伦老师好帖{:4_187:} 红影 发表于 2025-2-20 19:57
这是把小辣椒那个帖子变得动图可控了呢，真好
@小辣椒 亲爱的快来看啊
谢谢亲爱的艾特，看见了，这个制作非常的漂亮，有变色效果，一键停止，还有歌词同步，代码是一大堆，亚纶也是辛苦的 小辣椒 发表于 2025-2-21 22:16
谢谢亲爱的艾特，看见了，这个制作非常的漂亮，有变色效果，一键停止，还有歌词同步，代码是一大堆，亚纶 ...
应该是看到你那个不能一键全控，特地做的{:4_187:} 红影 发表于 2025-2-21 22:41
应该是看到你那个不能一键全控，特地做的
我那是可以一键停止的，发的时候太匆匆忙忙，一个数字错误没有看见，后来发现了 红影 发表于 2025-2-21 22:41
应该是看到你那个不能一键全控，特地做的
应该还是我的一键停止效果漂亮的，亚纶的变色效果有点生硬，没有淡进淡出效果{:4_170:} 小辣椒 发表于 2025-2-21 22:56
我那是可以一键停止的，发的时候太匆匆忙忙，一个数字错误没有看见，后来发现了
嗯，前面没注意的缘故吧{:4_173:} 小辣椒 发表于 2025-2-21 22:58
应该还是我的一键停止效果漂亮的，亚纶的变色效果有点生硬，没有淡进淡出效果
都漂亮，应该是亲爱的做的本来就漂亮{:4_187:}
页:
[1]