《月老儿说》 - 霍云龙（试帖亚伦老师玻璃舞者代码）
本帖最后由 亦是金 于 2025-2-11 17:17 编辑 <br /><br /><style>#papa {margin: 100px 0 0 calc(50% - 663px);
width: 1164px;
height: 640px;
background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a56f7f6065983b88da4f88456513ad62.png?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080')no-repeat center / cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;
overflow: hidden;
border-radius: 20px;
z-index: 12345;
}
#vid { position: absolute; width: 62%; height: 55%; top:2%; left:19%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 4px #880000;}
#dt{position: absolute;top:60%; left:21%;width: 57%;height: 40%;z-index:-1;}
#dt1{position: absolute;top:4%; left:4%;width: 11%;height: 90%;z-index:-1;}
#dt2{position: absolute;top:4%; left:85%;width: 11%;height: 90%;z-index:-1;transform: rotateY(180deg);}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:88%; left:53%;
bottom: 5px;
width: 22px;
height: 18px;background:#cccccc;
border: 2px solid #000000;
border-radius: 50%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #000000;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 8px;
border-width: 5px 8px;
border-color: transparent transparent transparent #000000;
opacity: var(--disp1);<!//*播放按钮*//>
}
#mplayer::after {
width: 1px;
height: 10px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);<!//*暂停按钮*//>
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 15px sans-serif;
color: #ffffff;
top:61%;
left:45%;}
#prog {position: absolute;z-index: 91;
width: 11%;
height: 1.2%;
cursor: pointer;
top:96%;
box-shadow: 0px 0px 1px 1px #ffffff;
left:44.5%;
border-radius: 3px;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#musickrc{width:50%;line-height:30px;position: absolute;position: absolute;left:25%;top:46%;z-index: 11;filter:drop-shadow(#ffffff 0.8px 0 0)drop-shadow(#ffffff 0 0.8px 0)drop-shadow(#ffffff -0.8px 0 0) drop-shadow(#ffffff 0 -0.8px0);}
#musickrc span {display:block;text-align:center; }
</style>
<div id="papa">
<div id="dt"><img id="Img" src="https://z4a.net/images/2024/01/05/65960c24871b83018a18c921g.gif" width="100%" height="100%"></div>
<div id="dt1"><img id="Img1" src="https://pic.imgdb.cn/item/65960c33871b83018a18e31b.gif" width="100%" height="100%"></div>
<div id="dt2"><img id="Img2" src="https://pic.imgdb.cn/item/65960c33871b83018a18e31b.gif" width="100%" height="100%"></div>
<video id="vid"src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1367833488.mp4" muted autoplay loop></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divid="musickrc" >
<p id="musickrc01"style="color:#f258b6; text-align:left;font-weight: ;font-family:隶书;font-size: 22px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:隶书;font-size: 22px;" ></P>
</div>
<div id="testImg"><div id="bt"><div id="klok">《月老儿说》 - 霍云龙</div></di></di>
</div>
<div style="position: relative;width: 500px;height: 50px;top: 600px;LEFT: 990px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:20px;">亦是金在线音乐</span></span></span></p></div>
<audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/mp3/yuelaoshuo.mp3" loop autoplay></audio>
<script >
var songkrc =`《月老儿说》 - 霍云龙
作词：沧桑 | 作曲：徐信
演唱：霍云龙
歌词编辑：亦是金
- - - - - -
卦摊儿前 我问先生把命算
算我姻缘 何时上上签
先生天干地支 一顿念
他说 今生有缘自相见
我仰望 满天星辰问月圆
为何月圆 相思不圆满
我在佛前跪拜 问姻缘
佛说 人间姻缘月老管
月老儿说 想问姻缘先交钱
没钱这根红线 不能牵
车贷房贷 月月都要还
月老儿说 想问姻缘先交钱
只要有钱啥事 都好办
现在红线都归 财神管
没钱做靠山 哪里求姻缘
- - - - - -
我仰望 满天星辰问月圆
为何月圆 相思不圆满
我在佛前跪拜 问姻缘
佛说 人间姻缘月老管
月老儿说 想问姻缘先交钱
没钱这根红线 不能牵
车贷房贷 月月都要还
月老儿说 想问姻缘先交钱
只要有钱啥事 都好办
现在红线都归 财神管
没钱做靠山 哪里求姻缘
月老儿说 想问姻缘先交钱
没钱这根红线 不能牵
车贷房贷 月月都要还
月老儿说 想问姻缘先交钱
只要有钱啥事 都好办
现在红线都归 财神管
没钱做靠山 哪里求姻缘
-- 谢谢欣赏 --
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #111111 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
/*结束*/
/*控制歌词颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/
/*控制文字颜色*/
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
/*结束*/
</script>
<style>
#bt{ width: 15%; height: 50px;color: #00ff00; position: absolute; left:23%;top:3%;font-size: 22px; font-family:隶书;z-index: 21; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 50%;}
}
#klok{width: 560px; height: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#880000;
background-image:linear-gradient(20deg, #ff0000 40%, #00ff80 50%, #fff000 10%, #000078 60%);
background-repeat:no-repeat;
line-height:35px;background-position: 0px 0;
-webkit-animation:loop 2slinearinfinite ;/*标题动画颜色变化时间*/}
@-webkit-keyframes loop{
50%{background-position: -300px 0;filter:hue-rotate(0deg)contrast(120%)brightness(150%);}
}
</style>
<script>
/*控制动画*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
</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 = '';image1.style.opacity = '';image2.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;
}
}
};
}
vid=document.querySelector('#vid');
var image= document.getElementById("Img");
var image1= document.getElementById("Img1");
var image2= document.getElementById("Img2");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause(),image1.stop(),image2.stop()):(image.play(),vid.play(),image1.play(),image2.play())};
</script> 这个视频好奇特。亦是金老师不容易，为了试贴一遍遍尝试，才做成的。恭喜亦是金老师成功了{:4_199:} 下面的音响有点比例失真呢，亦是金老师可以加高父元素，然后把这个图图长度增加。否则看着喇叭都扁了啊{:4_173:} 这个视频太有趣了，美女拨弄的线条，真的像是拨弄了姻缘红线呢{:4_173:} 这个视频很有趣！ 红影 发表于 2024-1-9 12:21
这个视频好奇特。亦是金老师不容易，为了试贴一遍遍尝试，才做成的。恭喜亦是金老师成功了
问好红影！谢谢删除原来的试帖自留地，给你添麻烦了！{:4_187:} 红影 发表于 2024-1-9 12:23
下面的音响有点比例失真呢，亦是金老师可以加高父元素，然后把这个图图长度增加。否则看着喇叭都扁了啊{:4_ ...
是的，谢谢指点！{:4_187:} 红影 发表于 2024-1-9 12:24
这个视频太有趣了，美女拨弄的线条，真的像是拨弄了姻缘红线呢
{:4_189:} 亚伦影音工作室 发表于 2024-1-9 12:42
这个视频很有趣！
问好亚伦老师！谢谢你的代码！{:4_190:} 亦是金 发表于 2024-1-9 13:51
问好红影！谢谢删除原来的试帖自留地，给你添麻烦了！
不麻烦啊，可以从中感受到亦是金试贴的不易，辛苦了{:4_187:} 亦是金 发表于 2024-1-9 13:53
是的，谢谢指点！
指点不敢，大家相互探讨而已啊{:4_204:} 亦是金 发表于 2024-1-9 13:53
亦是金老师找的视频和歌曲太贴切了{:4_187:} 红影 发表于 2024-1-9 14:06
不麻烦啊，可以从中感受到亦是金试贴的不易，辛苦了
我不懂代码，只会胡拼乱凑，反复试帖，见笑了！{:5_102:} 红影 发表于 2024-1-9 14:06
指点不敢，大家相互探讨而已啊
你谦虚了！在这里受益多多，向你致敬！{:4_187:} 红影 发表于 2024-1-9 14:07
亦是金老师找的视频和歌曲太贴切了
谢谢夸奖！开心！{:4_205:} 亦是金 发表于 2024-1-9 14:10
我不懂代码，只会胡拼乱凑，反复试帖，见笑了！
我也不懂，好多时候做着做着就掉坑了，和你一样呢{:4_173:} 亦是金 发表于 2024-1-9 14:13
你谦虚了！在这里受益多多，向你致敬！
哪里啊，我也是在学习中啊{:4_187:} 亦是金 发表于 2024-1-9 14:14
谢谢夸奖！开心！
亚伦老师的事玻璃舞者，你这个是线条舞者呢{:4_173:} 好制作，欣赏欣赏 老师多才多艺的，感谢分享
页:
[1]
2