请教黑黑老师

小辣椒

小辣椒

黑黑，我这个播放器放不进去，昨天后来我想用文件夹上传，把css,js都下载了，电脑预览好的，上传后出来有乱码了

小辣椒

上次灯笼我下载了文件夹加H5播放器是好的，这次没有成功

我估计又是父盘的问题我不会加的原因

小辣椒

那个文字也是跑上面去了

小辣椒

重新做一次

小辣椒

你那边的帖打开就转出去了，不能回帖@马黑黑

红影

亲爱的帖子做的真漂亮。滚动字和播放器的确跑出去了，等着黑黑来解答

来看你

代码这么长啊

我昨天贴歌准备用这个播放器的，结果显示出来的是一个大黑点 ，一动不动的大黑点

小辣椒

红影 发表于 2022-2-11 21:31
亲爱的帖子做的真漂亮。滚动字和播放器的确跑出去了，等着黑黑来解答

是的，主要我这个父容器怎么设置不懂，本来可以想笨办法，我可以分开上传，但这个按钮就是不行，上传出来有乱码

小辣椒

来看你 发表于 2022-2-11 21:38
代码这么长啊

我昨天贴歌准备用这个播放器的，结果显示出来的是一个大黑点 ，一动不动的大黑点

看看，这个单用转盘按钮很简单的，我是加下雨特效里面不会

来看你

小辣椒 发表于 2022-2-11 21:43
看看，这个单用转盘按钮很简单的，我是加下雨特效里面不会

按钮是这个代码吗 <div class="paBox">
        <div class="soBox"></div>
   

        <!-- 按钮 -->
        <div id="roBox" class="roBox60" style="left:-5%;top:-120.9%;">●</div>
</div>

<audio id="ymusic" src="https://oss.shandianpan.com/fb779314f4a9eff9aa66e87090f3a1da.mp3" autoplay="autoplay" loop="loop"></audio>

小辣椒

来看你 发表于 2022-2-11 21:45
按钮是这个代码吗
        
   

上面都要加进去，那边我艾特你了，你去看看，要源码我发出来你看看。这个要黑黑来纠正错误的

马黑黑

这个，太乱，修改不如重建

小辣椒

马黑黑 发表于 2022-2-11 21:59
这个，太乱，修改不如重建

怎么重建呢？是不是父容器没有加进去？

小辣椒

马黑黑 发表于 2022-2-11 21:59
这个，太乱，修改不如重建

黑黑我删了吧

马黑黑

小辣椒 发表于 2022-2-11 22:02
怎么重建呢？是不是父容器没有加进去？

总之吧，你要整合，不是两个东东简单放在一起，这可不是搭伙过日子

<style type="text/css">

.mnBox {
        margin: auto;
        margin-top: 150px;
        position: relative;
        background: #333 url('https://wj.zp68.com/lxx/yunhua/2022/02/11/GIF.gif') no-repeat center/cover;
        height: 726px;
        width: 1285px;
        left: -340px;
        border: 1px solid;
        box-shadow: 0px 0px 0px 2px tan;
}

.rain {
        width: 1px;
        height: 8px;
        top: -5px;
        left: 200px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 10px;
        background: #eee;
}

.rain::after { height: 12px; left: -70px; top: 50px; }

.circle {
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;  }
}
/* 旋转按钮  */
.btn-ro {
        position: absolute;
        left: 1200px;
        width: 32px; height: 32px;
        line-height: 32px; font-size: 12px;
        background: linear-gradient(blue,gray,red);
        outline:none;
        color: white;
        border-radius: 50%;
        text-align: center;
        box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
        cursor: pointer;
        animation: rol linear 2s infinite;
}

.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div id="mnBox" class="mnBox">
        <div style="color:#fff;margin:0px;padding:10px;font-size:5px;font-family:'微软雅黑';text-shadow:1px 1px 1px #000;">
                <p style="position: absolute; left:600px; top:550px; color: #b6d8d8;"><marquee  scrollamount="3" direction="left" ><font face="微软雅黑" size="4">【刘紫玲】三月里的小雨 淅沥沥下个不停。。。。</font></marquee></p>
        </div>
        <div id="btn-ro" class="btn-ro">●</div>
</div>
<audio id="ymusic" src="https://oss.shandianpan.com/fb779314f4a9eff9aa66e87090f3a1da.mp3" autoplay="autoplay" loop="loop"></audio>


<script language="javascript">
//雨丝放在前面
function rain() {
        var str = "";
        for(i=0; i<50; i++) {
                var l = Math.ceil(Math.random()*1200);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
        }
        for(j=0;j<40; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*20+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
        }
        document.getElementById('mnBox').innerHTML += str;
}
rain();

//按钮放后面
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('btn-ro');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(), mbtn.style.animationPlayState="paused"); }

</script>

马黑黑

小辣椒 发表于 2022-2-11 22:22
黑黑我删了吧

不用的

小辣椒

马黑黑 发表于 2022-2-11 22:26
不用的

哦，才看见你这样说，我以后重新做一次，这个效果留着

马黑黑

小辣椒 发表于 2022-2-11 22:27
哦，才看见你这样说，我以后重新做一次，这个效果留着

你试一下16楼的代码

小辣椒

马黑黑 发表于 2022-2-11 22:25
总之吧，你要整合，不是两个东东简单放在一起，这可不是搭伙过日子

好的，我仔细看看，谢谢黑黑