小九来看看你的帖子代码

马黑黑 发表于 2022-3-15 19:00

本帖最后由马黑黑于 2022-3-15 19:02 编辑

做了一些必要的调整，你会发现这个代码组织性更好，也更简洁。marquee标签保留，但不建议以后继续使用。

我的调整，一些细节可能不如你愿，你可以修改尺寸和位置。完整代码分享如下：

<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 700px; background:#333 url('/data/attachment/forum/202203/13/125044dvouegood00j0olb.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
   margin: auto;
   width: 360px;
   text-align: center;
   font-size: 5rem;
   font-weight: bold;
   color: #EEEE00;
   transform-origin: top;
   animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
   from{transform: perspective(800px) rotatex(30deg); }
   to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放按钮 */
.picBtn {
   width: 120px;
   height: 120px;
   border: none;
   outline: none;
   border-radius: 8px;
   background: transparent url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif') no-repeat;
   cursor: pointer;
}
</style>

<div id="xq" >
   <div id="baiBox" style="position: absolute; left:120px; top: 40px; ">人世间</div>
   <div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
            <img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
            <div style="position:absolute; width:260px; left:560px; top: 10px; text-align:center;padding:10px;font-size:1em;font-family:'微软雅黑';text-shadow:1px 1px 2px #000;">
                     <marqueescrollamount="5" direction="left" >祝你踏过千层浪，不忘少年样，也无惧白发苍苍 </marquee>
            </div>
   </div>
   
   <div style="position:absolute; width:120px; left: 10px; top:calc(100% - 140px); text-align:center;">
            <button id="picBtn" class="picBtn"></button>
   </div>
</div>

<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=488664116.mp3" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
   btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
});
</script>

@小九 @小辣椒 @大猫咪

马黑黑 发表于 2022-3-15 19:03

大猫咪 发表于 2022-3-15 19:07

谢谢老黑 {:4_187:} 真棒，猫这就学习 {:4_191:}{:4_179:}

马黑黑 发表于 2022-3-15 19:16

大猫咪发表于 2022-3-15 19:07
谢谢老黑真棒，猫这就学习

代码分三段，第一段是CSS，第二段是HTML，第三段是JS（JS主要用于控制大猫咪按钮）{:4_170:}

大猫咪 发表于 2022-3-15 19:19

马黑黑发表于 2022-3-15 19:16
代码分三段，第一段是CSS，第二段是HTML，第三段是JS（JS主要用于控制大猫咪按钮）

嗯嗯好的 {:4_179:} 谢谢老黑 {:4_170:}

马黑黑 发表于 2022-3-15 20:26

大猫咪发表于 2022-3-15 19:19
嗯嗯好的谢谢老黑

今天不三陪了？

大猫咪 发表于 2022-3-15 20:28

马黑黑发表于 2022-3-15 20:26
今天不三陪了？

疫情严重，出不去哈哈{:4_170:}

红影发表于 2022-3-15 20:28

黑黑辛苦了。原来的代码的确在HTML部分有点乱。主要吧播放器扔在父框里了，而且</div>用的地方不对。
黑黑整理一下清楚多了。{:4_187:}

马黑黑 发表于 2022-3-15 20:28

大猫咪发表于 2022-3-15 20:28
疫情严重，出不去哈哈

对呀，好像也有一千多例了

红影发表于 2022-3-15 20:29

这个父框名称还是我起的呢，xq是心情不错那首歌的首字母的头两个{:4_173:}

大猫咪 发表于 2022-3-15 20:29

马黑黑发表于 2022-3-15 20:28
对呀，好像也有一千多例了

猫这差不多封半城了

马黑黑 发表于 2022-3-15 20:30

红影发表于 2022-3-15 20:28
黑黑辛苦了。原来的代码的确在HTML部分有点乱。主要吧播放器扔在父框里了，而且用的地方不对。
黑黑整理一 ...

处理了一下下逻辑方面的关系，其他大家继续努力

马黑黑 发表于 2022-3-15 20:30

大猫咪发表于 2022-3-15 20:29
猫这差不多封半城了

哪里呀

马黑黑 发表于 2022-3-15 20:30

红影发表于 2022-3-15 20:29
这个父框名称还是我起的呢，xq是心情不错那首歌的首字母的头两个

我知道，我看过

大猫咪 发表于 2022-3-15 20:31

马黑黑发表于 2022-3-15 20:30
哪里呀

昆明啊 {:5_117:}

小九发表于 2022-3-15 20:52

谢谢黑黑！辛苦了！{:4_190:}{:4_187:}

小九发表于 2022-3-15 20:59

马黑黑发表于 2022-3-15 19:16
代码分三段，第一段是CSS，第二段是HTML，第三段是JS（JS主要用于控制大猫咪按钮）

JS 就是控制猫咪的

马黑黑 发表于 2022-3-15 21:07

小九发表于 2022-3-15 20:59
JS 就是控制猫咪的

对的{:4_170:}

马黑黑 发表于 2022-3-15 21:08

小九发表于 2022-3-15 20:52
谢谢黑黑！辛苦了！

午休过了不辛苦

马黑黑 发表于 2022-3-15 21:10

大猫咪发表于 2022-3-15 20:31
昆明啊

哦，昆明是我的故乡

页: [1] 2 3 4

花潮论坛's Archiver

小九来看看你的帖子代码