凑热闹 一张图无缝链接且滚动【可控】
本帖最后由 亚伦影音工作室 于 2024-1-16 21:15 编辑 <br /><br /><style type="text/css">.papa{margin: 150px -300px ; width: 1164px; height: 640px;background:#000080 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0323a98fe3627a64c6c16d96c701d18f.jpg)0 0/100%100%;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}#photos img{float:right;width:1164px;height:640px;position:relative;z-index: 1;}
#photos {position: absolute;width: calc(1164px * 10);animation: animate 60s ease-out infinite alternate;}
@keyframes animate {0%{right:-10476px;}100% {right:0px; }}
#tu {width: 100px;z-index: 4;
height: 300px;top:14%; left:5%;position: absolute;}
#mplayer {z-index: 80;
position: absolute;
top:94%; left:50%;
bottom: 20px;
width: 30px;
height: 30px;background:#333333;
border: 0px solid #000000;
border-radius: 10%;
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: #ffffff;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 12px;
border-width: 6px 12px;
border-color: transparent transparent transparent #ffffff;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 14px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#musickrc{width:90%;line-height:30px;position: absolute;position: absolute;left:5%;top:62%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);-webkit-transform:translate(0%,0%)perspective(100px)scale(1) rotate(8deg);}
#musickrc span {display:block;text-align:center; }
</style>
<div class="papa" title="亚伦影音">
<div id="photos" title="亚伦影音">
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb0a304c6e8cbfdb2539aea2e3fa4da7.jpg" style="transform: rotateY(180deg);" />
</div>
<div id="tu" ><img alt="" src="https://pic.imgdb.cn/item/65a67b84871b83018a2709d4.png"/></div>
<div id="mplayer" title="暂停/播放"> </div>
<div id="musickrc">
<p id="musickrc01" style="color:#880000; text-align:center;font-weight: ;font-family:华文隶书;font-size: 45px;"> </p>
<p id="musickrc02" style="color:#000080;text-align:center;font-weight: ;font-family:华文隶书;font-size: 0px;"> </p>
</div>
<audio autoplay="" id="aud" loop="" src="https://www.qqmc.com/mp3/music333002591.mp3"> </audio>
</div>
<script >
var songkrc =`再回首
作词：陈乐融
作曲：卢冠廷
演唱：金润吉
编曲：金润吉
制作人：亚伦
和声：金润吉
吉他：牛子健
混音师：Mr.Choi
再回首 云遮断归途
再回首 荆棘密布
今夜不会再有
难舍的旧梦
曾经与你有的梦
今后要向你诉说
再回首 背影已远走
再回首 泪眼朦胧
留下你的祝福
寒夜温暖我
不管明天要面对
多少伤痛和迷惑
曾经在幽幽暗暗
反反复复中追问
才知道平平淡淡
从从容容才是真
再回首 恍然如梦
再回首 我心依旧
只有那无尽的长路
伴着我
再回首 背影已远走
再回首 泪眼朦胧
留下你的祝福
寒夜温暖我
不管明天要面对
多少伤痛和迷惑
曾经在幽幽暗暗
反反复复中追问
才知道平平淡淡
从从容容才是真
再回首 恍然如梦
再回首 我心依旧
只有那无尽的长路
伴着我
曾经在幽幽暗暗
反反复复中追问
才知道平平淡淡
从从容容才是真
再回首 恍然如梦
再回首 我心依旧
只有那无尽的长路
伴着我
再回首 恍然如梦
再回首 我心依旧
只有那无尽的长路
伴着我
`;
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());
})();
/*结束*/
photos.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>photos.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>photos.style.animationPlayState = 'paused');
</script>
也是正反图接起来的呢。很漂亮的制作。欣赏亚伦老师好帖{:4_187:} 来回滚动只需要marquee就够了，所谓无缝指的是头尾无缝相接。 好看极了！
页:
[1]