测试 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

醉美水芙蓉 发表于 2022-5-16 21:23

测试

本帖最后由加林森于 2022-5-16 23:03 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1568872">
<div style="z-index: 127;width: 1000px; height: 600px; margin-top:50px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background-size: 100%
100%;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%30%,linear-gradient(80deg, #000080, #ff0000, #000000, #00f000); text-align: center;">
<div class="cb-slideshow">
<li><img alt="1" src="https://img-baofun.zhhainiao.com/fs/bdcd3ab0baa909bd99ea0c57cf87aa96.jpg" style="width: 100%; height: 100%;" /></li>
<li><img alt="2" src="https://img-baofun.zhhainiao.com/fs/b88b0d50b4eff1f130b71c4732faccdf.jpg " style="width: 100%; height: 100%;" /></li>
<li><img alt="3" src="https://img-baofun.zhhainiao.com/fs/c4c07108ec060f828f2377bb9189cb91.jpg " style="width: 100%; height: 100%;" /></li>
<li><img alt="4" src="https://img-baofun.zhhainiao.com/fs/5cb95be2f32ed48a6f6d67e8ccb4f3bd.jpg " style="width:100%; height: 100%;" /></li>
<li><img alt="5" src="https://img-baofun.zhhainiao.com/fs/95ff3d69b91dba066cf20a90219e72a4.jpg " style="width: 100%; height: 100%;" /></li>
   <li><img alt="6" src="https://img-baofun.zhhainiao.com/fs/9dc3aadeb5cf88da683060ce44ab7df6.jpg " style="width: 100%; height: 100%;" /></li>
   <li><img alt="7" src="https://img-baofun.zhhainiao.com/fs/163023527ee93ade48cf6924ecadc543.jpg " style="width: 100%; height: 100%" /></li>
<li><img alt="8" src="https://img-baofun.zhhainiao.com/fs/593a2f2322a777fbcf2f44d4eecf434d.jpg " style="width: 100%; height: 100%" /></li>
<li><img alt="9" src="https://img-baofun.zhhainiao.com/fs/aa9234ad76019ddbb92b102cfd6db04a.jpg " style="width: 100%; height: 100%" /></li>
<li><img alt="10" src="https://img-baofun.zhhainiao.com/fs/b2e74677ba23a6d79251c95a070c8f46.jpg " style="width: 100%; height: 100%" /></li>
</div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://music.163.com/song/media/outer/url?id=1935947754.mp3" controls loop style="width: 1%;

height: 1%;z-index: 1;"></audio>
   <div class="btn">
   <span id="bf"onclick="bf();"style="width: 980px; height: 120px;z-index: 300;position: absolute;top:-70px; left:80px;"></span>
   <span id="bf"onclick="rbf();"></span>
   </div>
<div class="img_border"><img src="http://image.hnol.net/c/2022-01/08/22/202201082235389221-5769293.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;transform: rotateX

(45deg)rotateY(-10deg)rotateZ(0deg);" ></div>
<div class="items" >
<divclass="lrc">
   <ul id="ullrc">
      </ul>
   </div>
</div>
<style type="text/css">
.cb-slideshow li {
width: 1000px;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
opacity: 0;display: block;
z-index: 100;filter:contrast(130%)brightness(100%);
animation: imageAnimation 20s linear infinite 0s
}

.cb-slideshow li:nth-child(2){

animation-delay: 2s
}

.cb-slideshow li:nth-child(3){

animation-delay: 4s
}

.cb-slideshow li:nth-child(4){

animation-delay: 6s;
}

.cb-slideshow li:nth-child(5){

animation-delay: 8s;
}

.cb-slideshow li:nth-child(6) {

animation-delay: 10s
}

.cb-slideshow li:nth-child(7){

animation-delay: 12s;
}
.cb-slideshow li:nth-child(8){

animation-delay: 14s;
}
.cb-slideshow li:nth-child(9){

animation-delay: 16s;
}
.cb-slideshow li:nth-child(10){

animation-delay: 18s;
}

@-webkit-keyframes imageAnimation {
0% {
opacity: 0;-webkit-mask-image: radial-gradient(black 2% ,transparent 10%);
-webkit-transform:translate(0%,0%)scale(1)
}
5% {
opacity: 1;-webkit-mask-image: radial-gradient(black 10% ,transparent 30%);
-webkit-transform:translate(0%,0%)scale(1)
}

8% {
opacity: 1;-webkit-mask-image: radial-gradient(black 20% ,transparent 40%);
-webkit-transform:translate(0%,0%)scale(1)
}
11% {
opacity: 1;-webkit-mask-image: radial-gradient(black 35% ,transparent 70%);
-webkit-transform:translate(0%,0%)scale(1);
}
14% {
opacity: 1;-webkit-mask-image: radial-gradient(black 50% ,transparent 80%);
-webkit-transform:translate(0%,0%)scale(1.8);
}
25% {
opacity: 0;-webkit-mask-image: radial-gradient(black 100% ,transparent 100%);
-webkit-transform:translate(0%,0%)scale(2);

}}
</style>
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-30px;z-index: 100;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;z-index: 300;
margin: 0;
}
.container .lrc{
width: 960px;
height: 180px;z-index: 1;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:-70px; left:0px;
margin: 0 auto;
}
.container .lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 80px;
line-height: 90px;
font-family:悟空大字库;
font-size: 30px;
color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;

}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:100px;height:100px;margin:0px ;position: absolute;top:-40px; left:890px;}
.container .img_border #aplay{border:2px solid #000000;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(45deg) rotateY(-10deg)
rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(-10deg) rotateZ(360deg);}
}
.audio{
z-index: 1;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
opacity: 0;
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {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%);}}
</style>
<script >var lrc = `李英 - 不要活在别人的眼里 (DJ伟然版)
作词：魏歌
作曲：魏歌
编曲：姜凯升（姜山）
发行：歌娱文化
生活是什么滋味
只有自己慢慢体会
感觉累了这就对了
谁不是负重前行着
活着是为了什么
你的心里早有答案
过于在乎别人感受
所以你会那么的累
不要活在别人的眼里
要活在自己的心里
冷眼嘲笑当作鼓励
不用盲目的攀比
不要活在别人的嘴里
在乎你的人没有几个
流言蜚语选择忘记
日子总要自己过下去
活着是为了什么
你的心里早有答案
过于在乎别人感受
所以你会那么的累
不要活在别人的眼里
要活在自己的心里
冷眼嘲笑当作鼓励
不用盲目的攀比
不要活在别人的嘴里
在乎你的人没有几个
流言蜚语选择忘记
日子总要自己过下去
不要活在别人的眼里
要活在自己的心里
冷眼嘲笑当作鼓励
不用盲目的攀比
不要活在别人的嘴里
在乎你的人没有几个
流言蜚语选择忘记
日子总要自己过下去
`;
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 = 80, lrc_ul_height = 90;
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 = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
   function rbf() {
         var audio = document.getElementById('MusicPlayer');
         var bf=document.getElementById("bf");
         audio.currentTime = 0;
         audio.play();
         bf.innerText="";
   }

   function bf() {
         var audio = document.getElementById('MusicPlayer');
         var bf=document.getElementById("bf");
         if (audio !== null) {
            if (audio.paused) {
               audio.play(); //audio.play();// 这个就是播放
               bf.innerText="";
            } else {
               audio.pause(); // 这个就是暂停
               bf.innerText="";
            }
         }
   }
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);

my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("ullrc").innerHTML = lyric; if(i

+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric;};};};}; my_audio.play();</script></td></tr></table>

东篱闲人 发表于 2022-5-16 21:31

这个效果真好！{:5_116:}

马黑黑 发表于 2022-5-16 21:38

效果很好

醉美水芙蓉 发表于 2022-5-16 22:05

东篱闲人发表于 2022-5-16 21:31
这个效果真好！

谢谢东篱老师告知！

醉美水芙蓉 发表于 2022-5-16 22:05

马黑黑发表于 2022-5-16 21:38
效果很好

谢谢黑黑老师告知！

加林森 发表于 2022-5-16 22:07

好像多了一个代码，是最后的。

马黑黑 发表于 2022-5-16 22:14

醉美水芙蓉发表于 2022-5-16 22:05
谢谢黑黑老师告知！

{:5_108:}

加林森 发表于 2022-5-16 22:16

水芙蓉制作得真漂亮，赞。修改一下吧。

红影发表于 2022-5-16 22:20

效果很棒，但代码里可能有点问题，让论坛排版都有点变形了{:4_187:}

绿叶清舟 发表于 2022-5-16 22:21

制作很棒啊

醉美水芙蓉 发表于 2022-5-16 22:33

加林森发表于 2022-5-16 22:07
好像多了一个代码，是最后的。

谢谢队长告知!

醉美水芙蓉 发表于 2022-5-16 22:33

红影发表于 2022-5-16 22:20
效果很棒，但代码里可能有点问题，让论坛排版都有点变形了

谢谢红影美女告知!

醉美水芙蓉 发表于 2022-5-16 22:34

绿叶清舟发表于 2022-5-16 22:21
制作很棒啊

谢谢轻舟美女支持!

加林森 发表于 2022-5-16 22:41

醉美水芙蓉发表于 2022-5-16 22:33
谢谢队长告知!

嗯嗯，不客气的。

加林森 发表于 2022-5-16 22:53

水芙蓉好样的！赞！

绿叶清舟 发表于 2022-5-17 20:28

醉美水芙蓉发表于 2022-5-16 22:34
谢谢轻舟美女支持!

芙蓉客气了

红影发表于 2022-5-17 21:37

醉美水芙蓉发表于 2022-5-16 22:33
谢谢红影美女告知!

现在已经调好了，真棒{:4_187:}

页: [1]

花潮论坛's Archiver

测试