王浩《心态好一切都好》[套用亚伦老师代码]
本帖最后由 klxf 于 2025-4-19 00:37 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>王浩《心态好一切都好》</title>
</head>
<body>
<style >
#papa{margin: 80px 80px ;
width: 600px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height: 820px;
border: 2px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) inset;
border-radius: 5px;
background: #333 url('https://cccimg.com/view.php/8f9e1e987e980e653a2976027b684516.gif') no-repeat center/cover;
position: relative;z-index: 12345;--state: paused;}
#papa:hover { transform:rotate(0deg)scale(1)}
#tu{position: absolute;top:0%; left:0%;z-index: 2;
width: 100%;filter: url(#water);
height: 100%;animation: round 60s linear infinite var(--state); }
#tu img{width: 100%;
}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
}
#dt{position: absolute;top:75%; left:18%;
width: 65%;mix-blend-mode: screen;
height: 20%;z-index: 3; }
#dt img{
width: 100%;
height: 100%;}
.mplayer { position: absolute; width: 65%; height: fit-content; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #eee; margin: auto; top: 90%; left:18%;z-index: 20; }
.mplayer::before { position: absolute; content: attr(data-time); width: 100%; text-align-last: justify; pointer-events: none; }
.btnPlay { width: 20px; height: 20px; cursor: pointer; position: relative; }
.btnPlay::after { position: absolute; content: ''; width: 100%; height: 100%; background: red; clip-path: var(--clip); }
.progress { --prg: 0%; position: relative; width: 100%; height: 20px; display: grid; place-items: center start; background: linear-gradient(90deg, red var(--prg), gray var(--prg), gray 0) no-repeat center/100% 2px; padding: 0; margin: 0; }
.thumb { position: absolute; left: calc(var(--prg) - 10px); width: 10px; height: 10px; background: red; border: 1px solid #FF0000; border-radius: 50%; cursor: pointer; box-sizing: border-box; }
.play { --clip: polygon(10% 0,100% 50%,10% 100%); }
.pause { --clip: polygon(35% 0,15% 0,15% 100%, 35% 100%,35% 0,75% 0,75% 100%,55% 100%,55% 0); }
</style>
<div id="papa">
<div id='dt'><img id="testImg" src="https://cccimg.com/view.php/7dedb9e000fd4291a27e6557f3b41c9a.gif" ></div>
<div id='tu'>
<svg width="0" height="0" id="p" >
<filter id="water">
<feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
<feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
<animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="5" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
<img src="https://cccimg.com/view.php/8f9e1e987e980e653a2976027b684516.gif" alt="">
</div>
<div class="mplayer" data-time="00:00 00:00">
<div class="btnPlay play"></div>
<div class="progress">
<div class="thumb"></div>
</div>
</div>
<div class="lrc">
<ul id="ul">
</ul>
</div>
</div>
<audio id="audio" src="https://cccimg.com/view.php/a49982757c4d1446316801a2063a690d.mp3" loop autoplay></audio>
<style>
.lrc {position:absolute;width: 540px;
height: 450px;z-index: 6;
border: 0px solid white; top:-18%;
overflow: hidden;margin: 200px 0px;
}
.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0}
.lrc #ul li {
font-family:微软雅黑;
font-size: 20px;
color: #ccc;
font-weight:400;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;
height: 50px;
line-height: 35px;
}
.lrc #ulli.active{ font-size: 38px;font-family:华文行楷;
color: #ff0000;font-weight:800;
text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, #ff0000, 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>
<script>
var lrc = `心态好一切都好
词曲：王浩
编曲：王浩
混音：王浩
出品发行：广州浩歌文化
花无百日红人无千日好
人生总会有各种的烦恼
凡事看开些不必太计较
大事就化小小事要化了
人在江湖飘哪能不挨刀
只要心在跳没啥大不了
除了阳关道还有独木桥
逆时不气馁顺时不骄傲
只要心态好一切都会好
无论生活怎样请记得微笑
心宽路就宽心好命就好
心态好没烦恼生活乐逍遥
只要心态好一切都会好
管他有钱没钱开心最重要
平安就是福健康就是宝
心态好人不老人生多美妙
花无百日红人无千日好
人生总会有各种的烦恼
凡事看开些不必太计较
大事就化小小事要化了
人在江湖飘哪能不挨刀
只要心在跳没啥大不了
除了阳关道还有独木桥
逆时不气馁顺时不骄傲
只要心态好一切都会好
无论生活怎样请记得微笑
心宽路就宽心好命就好
心态好没烦恼生活乐逍遥
只要心态好一切都会好
管他有钱没钱开心最重要
平安就是福健康就是宝
心态好人不老人生多美妙
只要心态好一切都会好
无论生活怎样请记得微笑
心宽路就宽心好命就好
心态好没烦恼生活乐逍遥
只要心态好一切都会好
管他有钱没钱开心最重要
平安就是福健康就是宝
心态好人不老人生多美妙
`;
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
audio: document.querySelector("#audio"),
ul: document.querySelector("#ul"),
container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData
}
result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
lrcTimeArr = lrcTime.split(":")
return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
let Time = doms.audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > Time) {
return i - 1;
}
}
}
// 创建歌词列表
function createElements() {
let frag = document.createDocumentFragment(); // 文档片段
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
frag.appendChild(li);
}
doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
let index = getIndex();
// 计算滚动距离
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
if (offset < minOffset) {
offset = minOffset;
};
if (offset > maxOffset) {
offset = maxOffset;
};
// 滚动
doms.ul.style.transform = `translateY(-${offset}px)`;
// 清除之前的active
let li = doms.ul.querySelector(".active")
if (li) {
li.classList.remove("active");
}
// 为当前所唱到的歌词添加active
li = doms.ul.children;
if (li) {
li.classList.add("active");
}
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</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("testImg");
</script>
<script>
//获取需要操作的元素标识
const mplayer = document.querySelector('.mplayer');
const btnPlay = document.querySelector('.btnPlay');
const progress = document.querySelector('.progress');
const thumb = document.querySelector('.thumb');
const audio = document.querySelector('audio');
// 拖曳操作状态（初始值为假）
let isDraggable = false;
//时间格式化工具函数 ：秒转分秒 mm:ss 格式
const formatTime = (seconds) => {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
// 联动函数 mState ：处理按钮形状
const mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
btnPlay.className = `btnPlay ${['pause', 'play'][+audio.paused]}`;
};
// 获取设备指针所在点在进度条上的距离（百分比）
const getPercent = (e) => {
const rect = progress.getBoundingClientRect();
const left = rect.left;
const width = rect.width;
let x = e.clientX ?? e.touches?.?.clientX ?? e.changedTouches?.?.clientX;
x = Math.min(width, Math.max(0, x - left));
return x / width * 100;
};
// 滑块鼠标按下、触屏设备手指或触笔按下
thumb.onmousedown = thumb.ontouchstart = (e) => {
isDraggable = true; // 拖曳状态进行中
e.preventDefault(); // 阻止默认行为
};
// 文档指针松开、触屏设备手指或触笔弹开
document.onmouseup = document.ontouchend = (e) => {
// 松开时若拖曳状态为真，驱动 audio 改变播放进度
if (isDraggable) audio.currentTime = `${getPercent(e) * audio.duration / 100}`;
isDraggable = false; //然后拖曳状态为假
};
// 文档上指针或手指、触笔移动时
document.onmousemove = document.ontouchmove = (e) => {
if (!isDraggable) return; // 若不是拖曳状态则忽略之
// 反之，若处于拖曳状态，给CSS变量 --prg 赋值
progress.style.setProperty('--prg', `${getPercent(e)}%`);
// 给时间文本信息即mplayer伪元素 attr(data-time) 函数赋值
mplayer.dataset.time = `${formatTime(audio.duration * getPercent(e) / 100)} ${formatTime(audio.duration)}`;
};
// 进度条点击事件
progress.onclick = (e) => audio.currentTime = `${getPercent(e) * audio.duration / 100}`;
// 音频标签开始播放和暂停时执行联动函数
audio.onplaying = audio.onpause = () => mState();
// 音频时间更新事件 ：驱动文本时间信息及进度条进度变更
audio.ontimeupdate = () => {
if (isDraggable) return; // 拖曳操作发生时忽略
mplayer.dataset.time = `${formatTime(audio.currentTime)} ${formatTime(audio.duration)}`;
progress.style.setProperty('--prg', `${audio.currentTime / audio.duration * 100}%`);
};
// 按钮单击 ：播放、暂停状态切换
btnPlay.onclick = () => audio.paused ? (audio.play(),image.play(),p.unpauseAnimations()) : (audio.pause(),image.stop(),p.pauseAnimations());
</script>
</body>
</html>
本帖最后由 klxf 于 2025-4-9 01:40 编辑
在帖子下部怎么出现了“无关代码”呢？——换成网页显示正常，不知其因
我也看到有代码！ 你肯定哪里少了代码了！ 醉美水芙蓉 发表于 2025-4-8 18:26
你肯定哪里少了代码了！
不清楚，预览正常呀，你帮我看看是哪少了代码了？ 醉美水芙蓉 发表于 2025-4-8 18:26
我也看到有代码！
换成网页显示正常，不知其因 谢谢楼主，，，收藏ing 感谢分享，带来新的思路 支持佳作，期待佳作连连
页:
[1]