宽幅音画帖通用代码

马黑黑 发表于 2022-1-17 17:31

直接上代码：
<style type="text/css">
.mBox { /* 容器框 */
position: relative;
left: -304px; /* 左移 */
top: 100px; /* 下移 */
width: 1200px;
min-height: 300px; /* 最低高度 */
box-shadow: 2px 2px 4px 1pxrgba(0,0,0,.2);
background: transparent; /* 可改颜色和加底图 #aaa url('图片') no-repeat; */
}
.sBox { /* 内容框 */
padding: 20px;
background: #aaa;
text-align: center;
}
.sBox h2, p { padding: 10px; }
/* 代替 marquee 标签的代码 */
.marq {
margin: 10px auto;
position: relative; /* 因为可能需要移动，所以设置位置，自己加 left 和 top 并调整 */
width: 50%;
animation: goNow 10s linear infinite;
/* 时长为10秒，可根据需要修改
加 alternate 则来回移动
*/
}
@keyframes goNow {
/* 放 marquee 标签动画
若需自左向右 -50% 改为 50%
若需要上下把 X 改为 Y
*/
from { transform: translate(0,0); }
to { transform: translateX(-50%); }
}
/* 以下是播放按钮CSS代码 */
.picBtn {
   width: 32px;
   height: 32px;
   border: none;
   border-radius: 8px;
   background: transparent url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png') no-repeat;
   cursor: pointer;
   outline: none;
   box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}
.picBtn:hover {
   opacity: 0.95;
   box-shadow: 1px 1px 2px 2px rgba(0,0,255,.3);
}
#picBtn:active {
   opacity: 0.8;
   box-shadow: 0px 1px 1px 1px rgba(0,0,255,.5);
}
/* 播放按钮CSS代码结束 */

</style>

<div class="mBox">
<div class="sBox">
<h2>你的帖子标题</h2>
<p class="marq">测试：marquee 模拟替代</p>
<p><audio id="music" src="https://www.80wp.com/wj/30567/699e232f0afff874eed24fa822782b70.mp3" loop="loop" autoplay="autoplay" ></audio></p>
<p>你的签名年月日</p>
<button id="picBtn" class="picBtn"></button>
</div>
</div>

<script language="javascript">
//注意：JS代码放在所有帖子内容的后面
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/61e430692ab3f51d916a100c.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')");
}
mu.addEventListener("ended", function(){ btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')"; })
</script>

马黑黑 发表于 2022-1-17 17:32

已经包含播放器及其控制按钮

小辣椒 发表于 2022-1-17 19:24

黑黑这个代码发的好，做音画的可以借鉴了{:4_187:}

小辣椒 发表于 2022-1-17 19:26

绝对是网络论坛独一无二的，太强大了{:4_178:}

马黑黑 发表于 2022-1-17 19:26

小辣椒发表于 2022-1-17 19:24
黑黑这个代码发的好，做音画的可以借鉴了

你要先看看能不能运行。另外，真正用好它还需要调整一些东东、增减一些东东

马黑黑 发表于 2022-1-17 19:27

小辣椒发表于 2022-1-17 19:26
绝对是网络论坛独一无二的，太强大了

你太抬举我了{:5_102:}

小辣椒 发表于 2022-1-17 19:36

马黑黑发表于 2022-1-17 19:26
你要先看看能不能运行。另外，真正用好它还需要调整一些东东、增减一些东东

感觉玩这个发帖代码也是要有一点css基础

小辣椒 发表于 2022-1-17 19:36

马黑黑发表于 2022-1-17 19:27
你太抬举我了

这个是真心话

红影发表于 2022-1-17 19:51

“注意：JS代码放在所有帖子内容的后面”

这个现在肯定记得了{:4_173:}

红影发表于 2022-1-17 19:52

这个帖子好，把几个功能都集中了，除了图片和播放器按钮，其他还可以选着使用。很强大的使用大全{:4_199:}

马黑黑 发表于 2022-1-17 19:55

红影发表于 2022-1-17 19:52
这个帖子好，把几个功能都集中了，除了图片和播放器按钮，其他还可以选着使用。很强大的使用大全

使用时修改一下，别留虫虫

马黑黑 发表于 2022-1-17 19:57

小辣椒发表于 2022-1-17 19:36
这个是真心话

{:4_203:}

马黑黑 发表于 2022-1-17 19:57

小辣椒发表于 2022-1-17 19:36
感觉玩这个发帖代码也是要有一点css基础

当然，啥都不懂也不行

马黑黑 发表于 2022-1-17 20:59

代码为我所有，还需动动手术刀。以下是帖子实例代码（全）：
<style type="text/css">
.mBox {
position: relative;
left: -304px;
top: 100px;
width: 1200px;
min-height: 300px;
box-shadow: 2px 2px 4px 1pxrgba(0,0,0,.2);
background: transparent;
}
.sBox {
background: #aaa;
text-align: center;
}
.sBox h2, p { padding: 10px; }

.marq {
margin: 10px auto;
position: relative;
top: -620px;
left: -120px;
width: 50%;
animation: goNow 10s linear infinite alternate;
}
@keyframes goNow {
from { transform: translate(0,0); }
to { transform: translateX(-50%); }
}

.btnDiv {
   position: relative;
   width: 32px;
   height: 32px;
   border: none;
   background: #035575;
   border-radius: 50%;
   box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
   cursor: pointer;
}

.btnDiv:hover {
   opacity: .8;
   box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
}

.btnDiv:active {
   opacity: .8;
   box-shadow: 1px 1px 1px 0px rgba(0,0,0,.9);
}

.btn-play {
   position: absolute;
   width: 0px;
   height: 0px;
   border: 10px solid #000;
   border-top-color:transparent;
   border-right-color:transparent;
   border-bottom-color:transparent;
   border-left-color:#eee;
   left: 12px;
   top: 6px;
}

.btn-pause {
   position: absolute;
   display:none;
   width: 2px;
   height: 20px;
   border-right: 4px solid #eee;
   border-bottom:0px;
   border-left: 4px solid #eee;
   left: 11px;
   top: 6px;
}
</style>

<div class="mBox">
<div class="sBox">
<img src="https://638183.freep.cn/638183/Pic/xuehua.jpg" alt="" />
</div>
</div>
<h2 class ="marq">阿尔法 - 中国(维语版)</h2>
<audio id="ymusic" src="http://www.kumeiwp.com/sub/filestores/2021/09/26/ef22b4ac5961fdf344558aa51a913d6f.mp3"></audio>
<div id="btnDiv" class="btnDiv">
<div id="btn-play" class="btn-play"></div>
<div id="btn-pause" class="btn-pause"></div>
</div>

<script language="javascript">

//JS代码
var mu = document.getElementById('ymusic');
var btn = document.getElementById('btnDiv');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');

btn.onclick = function(){ iplay(1); }
mu.addEventListener("ended", function(){ iplay(0); })

function iplay(flag){
   if(flag==1){
            mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
   }else{
            playbtn.style.display= "block";
            pausebtn.style.display = "none";
   }
}
</script>链接：https://www.huachaowang.com/thread-56156-1-1.html

红影发表于 2022-1-17 21:40

马黑黑发表于 2022-1-17 19:55
使用时修改一下，别留虫虫

嗯嗯，有这个模板，应该不会再犯之前的错了{:4_173:}

马黑黑 发表于 2022-1-17 23:06

红影发表于 2022-1-17 21:40
嗯嗯，有这个模板，应该不会再犯之前的错了

但还是要理解透彻，用起来才得心应手

红影发表于 2022-1-18 13:48

马黑黑发表于 2022-1-17 23:06
但还是要理解透彻，用起来才得心应手

你下面还附了真实案例，更便于理解了{:4_187:}

马黑黑 发表于 2022-1-18 17:45

红影发表于 2022-1-18 13:48
你下面还附了真实案例，更便于理解了

理解还要去改造，为我所用

红影发表于 2022-1-18 22:51

马黑黑发表于 2022-1-18 17:45
理解还要去改造，为我所用

这个暂时还不敢，怕弄错啊。

马黑黑 发表于 2022-1-19 08:44

红影发表于 2022-1-18 22:51
这个暂时还不敢，怕弄错啊。

那就慢慢来。即使像我有一定经验的，有时候弄一个小小的功能，也是往往走好多弯路

页: [1] 2

花潮论坛's Archiver

宽幅音画帖通用代码