花潮论坛js封装测试【东篱闲人图片及视频，走过岁月动图】
本帖最后由 亚伦影音工作室 于 2024-7-14 21:17 编辑 <br /><br /><style>#papa { margin: 140px 0 20px calc(50% - 781px); width: 1400px; height: 700px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 123465; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height:700px;position:absolute;z-index: 1;top: 0px;}
#bjbs img{ width: 100%; height: 100%;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#jzg{width: 300px; height:360px;position:absolute;z-index: 2;left: 74%;top: 5%;cursor: pointer;}
#jzg img{ width: 100%; height: 100%;}
#vid { position: absolute; width: 70%; height: 70%; top:8%; left: 4%;object-fit: cover; pointer-events: none;opacity: 1;z-index: -1;}
#lrc{left: 15%;top: 88%;}#lrcc {right:15%;top: 92%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 2.5em 华文隶书;color: #ccc;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#000078 1px 0 0)drop-shadow(#000078 0 1px 0)drop-shadow(#000078 -1px 0 0) drop-shadow(#000078 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="papa">
<div id="bjbs"><img id="Img" src="https://pic.imgdb.cn/item/6688eb3dd9c307b7e9bd7a20.png" alt="" /></div>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/83/76/60f772cc0130c.mp4" muted autoplay loop></video>
<div id="jzg"title="暂停/播放"><img id="dtImg" src="http://www.bohann.net/data/attachment/forum/202407/14/210908bnlli1fjpznztxlc.gif" alt="" /></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/81/94/ce/aff37528d1189754b45af2a22fa0939b/audio.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">
本论坛js封装测试
来生不走人间路(DJ 默涵版)-大麦
作词Lyricist: 沈影
作曲Composer: 沈影
来生我再不走这人间路
来生再不踏这人间的土
颠沛半生却换不来一个归宿
受过的罪自己清楚
吃过别人没吃过的苦
却没享过别人曾享过的福
走着磕磕绊绊的道路
眼角的泪从未凝固
也曾毫无保留的付出
也曾伤痕累累体无完肤
拼尽全力还是一输再输
半生心酸半生孤独
来生我再不走这人间路
来生再不受这人间的苦
此生我咽下太多太多酸楚
一颗炙热的心早已麻木
来生我再不走这人间路
来生再不踏这人间的土
颠沛半生却换不来一个归宿
受过的罪自己清楚
也曾毫无保留的付出
也曾伤痕累累体无完肤
拼尽全力还是一输再输
半生心酸半生孤独
来生我再不走这人间路
来生再不受这人间的苦
此生我咽下太多太多酸楚
一颗炙热的心早已麻木
来生我再不走这人间路
来生再不踏这人间的土
颠沛半生却换不来一个归宿
受过的罪自己清楚
来生我再不走这人间路
来生再不受这人间的苦
此生我咽下太多太多酸楚
一颗炙热的心早已麻木
来生我再不走这人间路
来生再不踏这人间的土
颠沛半生却换不来一个归宿
受过的罪自己清楚
</span>
<script >
/*以下是歌词插件和动图的插件及控件*/
document.write('<script src="attach://45716.rar" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="attach://45715.rar" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="attach://45717.rar" type="text/javascript" charset="utf-8"><\/script>');
</script>
<script>
(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
加分带机关的，加了分飞出论坛了{:4_170:} 辫子哥哥 发表于 2024-7-14 11:38
加分带机关的，加了分飞出论坛了
这是使用了 document.write 语句的关系吧 这个漂亮，带来东篱大哥的音画，还有岁月的动图，这个动图还能当小播，一键暂停呢。
欣赏亚伦老师好帖{:4_199:} http://www.qeecc.com/plug/down.php?ac=music&id=ZGd4ZGl3d2tk&k=mp3
页:
[1]