试帖 克隆（换背景）

湛蓝

55楼代码：



<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-230px;  box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:  rotate(0deg);background: url(http://chuangshicdn.data.mvbox.c ... 417263445440463.gif)0 0/30%  30%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class="photo" alt="" src="http://tuku.link/imgs/2022/04/f13793dec95eeac0.jpg">
<img class="photo" alt="" src="http://tuku.link/imgs/2022/04/ace30c9c93024f01.jpg">
<img class="photo" alt="" src="https://s1.ax1x.com/2022/04/14/LQWSBR.jpg">
<img class="photo" alt="" src="https://s1.ax1x.com/2022/04/14/LQWbqA.jpg">
<img class="photo" alt="" src="https://s1.ax1x.com/2022/04/14/LQWdU0.jpg">
<img class="photo" alt="" src="http://tuku.link/imgs/2022/04/dac57df257cde97e.jpg">
<img class="photo" alt="" src="http://tuku.link/imgs/2022/04/8ce83e7797e06271.jpg">
<img class="photo" alt="" src="http://tuku.link/imgs/2022/04/501daa3f5e737022.jpg">

<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://music.lanyes.org/content/plugins/lymusic_tool/play.php?type=kw&id=215880440&.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  id="aplay"style="width: 100%; height: 100%;z-index: 110;background:url(http://pan.yinhuabbs.cn/view.php ... 12d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com ... b6a5d3451cfadb9.jpg)-20px 0px/180% 100%;filter:hue-rotate(0deg)contrast(130%)brightness(100%);" ></div>
     <div class="items" >
<div  class="lrc">
        <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1000px;
  height: 600px;
  position: absolute;top:0px; left:0px;
filter:contrast(130%)brightness(100%);
  animation: round 46s infinite;
  opacity: 0;}
@keyframes round {1% {opacity: 1;clip-path:circle(0% at 130% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
9% {opacity: 1;clip-path:  circle(100% at 50%  50%);
-webkit-transform:translate(0%,0%)scale(1);}
18% {opacity: 0.6;clip-path: circle(100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1.5);}
20% {opacity: 0;clip-path: circle(100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(2);}
}
img:nth-child(8) {animation-delay: 40s;}
img:nth-child(7) {animation-delay: 34s;}
img:nth-child(6) {animation-delay: 28s;}
img:nth-child(5) {animation-delay: 22s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}

.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:0px;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: 120px;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 -1px  0);
    display: block;position: absolute;top:-10px; 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: 70px;
    line-height: 70px;
font-family:悟空大字库;
    font-size: 0px;
    color: #000078;
    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;
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;top:-430px;left:250px;transform: scale(1,1);}
.container .img_border #aplay{display:block;border:2px solid #cccccc;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);clip-path: circle(50% at 50% 50%);background:url(http://pan.yinhuabbs.cn/view.php ... 12d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com ... c35d638c3869fbb.jpg)-120px 0px/180% 100%;filter:hue-rotate(360deg)contrast(130%)brightness(100%);}
100%{transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg);clip-path: circle(50% at 50%50%);background:url(http://pan.yinhuabbs.cn/view.php ... 12d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com ... b6a5d3451cfadb9.jpg)-20px 0px/180% 100%;filter:hue-rotate(0deg)contrast(130%)brightness(100%);}

}
.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;
}

.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 = `[00:04]心中最美的风景线
[00:06]作词：轻云望月
[00:09]作曲：轻云望月
[00:11]DJ：月之歌音乐室
[00:13]混音：烟圈蔓延
[00:15]出品：亚伦影音
[00:19]“未经授权禁止翻唱和商业使用”
[00:22]男：
[00:23]我不知道远方究竟有多远
[00:28]有你的地方就是我的终点
[00:33]哪怕趟万水 哪怕越千山
[00:38]也愿意奔向你和你手相牵
[00:42]女：
[00:43]我不知道红尘有多少爱恋
[00:48]自从第一眼就把你爱心间
[00:53]人为你相思 心为你牵绊
[00:58]再多曲折都难把我的爱阻断
[01:03]男：
[01:03]你是我心中最美的风景线
[01:08]感谢你出现把我人生温暖
[01:13]女：
[01:13]这一段情爱 这一场尘缘
[01:18]就算到天荒地老都不会厌倦
[01:23]男：
[01:23]你是我心中最美的风景线
[01:28]谢谢你出现把我流年惊艳
[01:33]女：
[01:34]爱着你所爱 念着你所念
[01:38]这辈子你就是我永远的永远
[02:03]男：
[02:04]我不知道红尘有多少爱恋
[02:09]自从第一眼就把你爱心间
[02:13]女：
[02:14]人为你相思 心为你牵绊
[02:19]再多曲折都难把我的爱阻断
[02:23]男：
[02:24]你是我心中最美的风景线
[02:29]感谢你出现把我人生温暖
[02:34]女：
[02:34]这一段情爱 这一场尘缘
[02:39]就算到天荒地老都不会厌倦
[02:44]男：
[02:44]你是我心中最美的风景线
[02:49]谢谢你出现把我流年惊艳
[02:53]女：
[02:54]爱着你所爱 念着你所念
[02:59]这辈子你就是我永远的永远
[03:04]男：
[03:04]你是我心中最美的风景线
[03:10]谢谢你出现把我流年惊艳
[03:14]女：
[03:15]爱着你所爱 念着你所念
[03:20]这辈子你就是我永远的永远
[03:24]合：
[03:25]这辈子你就是我永远的永远`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
        parts[index] = getLrcObj(parts[index]);
    }
    return parts;

    function getLrcObj(content) {
        var twoParts = content.split("]");
        var time = twoParts[0].substr(1);
        var timeParts = time.split(":");
        var seconds = +timeParts[1];
        var min = +timeParts[0];
        seconds = min * 60 + seconds;
        var words = twoParts[1];
        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[index].words;
        $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
        return;
    }
    var lrc_li_height = 70, lrc_ul_height = 50;
    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[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}
$("MusicPlayer").ontimeupdate = setPosition;

        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="";
                }
            }
        }

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<i>[0]){ document.getElementById("ullrc").innerHTML = lyric<i>[1]; if(i

+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric[i + 1][1];};};};}; my_audio.play();</script>

海儿心

又闯祸了

潇湘翁

湛蓝 发表于 2022-4-15 16:39
55楼代码：

老师：55楼的代码，是让我重做一次的代码吗？

我就来看看

海儿心 发表于 2022-4-15 16:40
. ...

用这链接修改你的帖子或删除它
http://www.keai99.com/forum.php?mod=post&action=edit&fid=46&tid=529928&pid=10276904

潇湘翁

湛蓝 发表于 2022-4-15 12:36
本帖最后由 湛蓝 于 2022-4-15 14:29 编辑 潇湘老师的代码：不知道老师的代码为何偏移,有点不解！用我的代 ...

老师：22楼的图片很正常，图片位置处于正中央，光盘也显示出来了，非常好！可不可以说，我发的这张图片的操作方法是没有问题的，而只不会调整罢了！或是说我这张图片发布完全失败了，如果是这样的话，失败的原因又是什么呢？也好吸取教训，而加以改进！

海儿心

我就来看看 发表于 2022-4-15 16:56 用这链接修改你的帖子或删除它 http://www.keai99.com/forum.php?mod=post&action=edit&fid=46&tid=5299 ...

看看老师早晨好！你的方法非常好！谢谢为我排忧解难！祝你快乐健康！http://www.keai99.com/forum.php? ... 529928&pid=10277594

湛蓝

我觉得老师您的操作没问题！下次我们换一套代码试试。


老师已经基本掌握了发代码帖的方法了，至于出现的问题虽然尚未完全解决，

多发几次这类的代码帖就能知道一二了

潇湘翁

湛蓝 发表于 2022-4-16 07:56
我觉得老师您的操作没问题！下次我们换一套代码试试。

谢谢老师的支持鼓励！早上好！

湛蓝

潇湘翁 发表于 2022-4-15 16:49
老师：55楼的代码，是让我重做一次的代码吗？

55楼代码不用做了，之前也做过

潇湘翁

湛蓝 发表于 2022-4-16 08:16
55楼代码不用做了，之前也做过

老师：我又做了一次克隆换背景，这次应该祘成功了，只是没有出来光盘，发表在子版，请老师去看看！