宽幅音画帖通用代码

马黑黑

直接上代码：

1. 
   
2. <style type="text/css">
   
3. .mBox {        /* 容器框 */
   
4.         position: relative;
   
5.         left: -304px; /* 左移 */
   
6.         top: 100px;        /* 下移 */
   
7.         width: 1200px;
   
8.         min-height: 300px;        /* 最低高度 */
   
9.         box-shadow: 2px 2px 4px 1px  rgba(0,0,0,.2);
   
10.         background: transparent;        /* 可改颜色和加底图 #aaa url('图片') no-repeat; */
    
11. }
    
12. .sBox { /* 内容框 */
    
13.         padding: 20px;
    
14.         background: #aaa;
    
15.         text-align: center;
    
16. }
    
17. .sBox h2, p { padding: 10px; }
    
18. /* 代替 marquee 标签的代码 */
    
19. .marq {
    
20.         margin: 10px auto;
    
21.         position: relative; /* 因为可能需要移动，所以设置位置，自己加 left 和 top 并调整 */
    
22.         width: 50%;
    
23.         animation: goNow 10s linear infinite;
    
24. /*        时长为10秒，可根据需要修改
    
25.         加 alternate 则来回移动
    
26. */
    
27. }
    
28. @keyframes goNow {
    
29. /*        放 marquee 标签动画
    
30.         若需自左向右 -50% 改为 50%
    
31.         若需要上下把 X 改为 Y
    
32. */
    
33.         from { transform: translate(0,0); }
    
34.         to { transform: translateX(-50%); }
    
35. }
    
36. /*        以下是播放按钮CSS代码        */
    
37. .picBtn {
    
38.         width: 32px;
    
39.         height: 32px;
    
40.         border: none;
    
41.         border-radius: 8px;
    
42.         background: transparent url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png') no-repeat;
    
43.         cursor: pointer;
    
44.         outline: none;
    
45.         box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
    
46. }
    
47. .picBtn:hover {
    
48.         opacity: 0.95;
    
49.         box-shadow: 1px 1px 2px 2px rgba(0,0,255,.3);
    
50. }
    
51. #picBtn:active {
    
52.         opacity: 0.8;
    
53.         box-shadow: 0px 1px 1px 1px rgba(0,0,255,.5);
    
54. }
    
55. /*        播放按钮CSS代码结束                */
    
56. 
    
57. </style>
    
58. <!--   帖子内容开始   -->
    
59. <div class="mBox">
    
60.         <div class="sBox">
    
61.                 <h2>你的帖子标题</h2>
    
62.                 <p class="marq">测试：marquee 模拟替代</p>
    
63.                 <p><audio id="music" src="https://www.80wp.com/wj/30567/699e232f0afff874eed24fa822782b70.mp3" loop="loop" autoplay="autoplay" ></audio></p>
    
64.                 <p>你的签名 年月日</p>
    
65.                 <button id="picBtn" class="picBtn"></button>
    
66.         </div>
    
67. </div>
    
68. <!--   帖子内容结束    -->
    
69. <script language="javascript">
    
70. //注意：JS代码放在所有帖子内容的后面
    
71. var mu = document.getElementById('music');
    
72. var btn = document.getElementById('picBtn');
    
73. btn.onclick = function(){
    
74.         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')");
    
75. }
    
76. mu.addEventListener("ended", function(){ btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')"; })
    
77. </script>

复制代码

马黑黑

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

小辣椒

黑黑这个代码发的好，做音画的可以借鉴了

小辣椒

绝对是网络论坛独一无二的，太强大了

马黑黑

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

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

马黑黑

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

你太抬举我了

小辣椒

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

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

小辣椒

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

这个是真心话

红影

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

这个现在肯定记得了

红影

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

马黑黑

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

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

马黑黑

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

马黑黑

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

当然，啥都不懂也不行

马黑黑

代码为我所有，还需动动手术刀。以下是帖子实例代码（全）：

1. <style type="text/css">
   
2. .mBox {
   
3.         position: relative;
   
4.         left: -304px;
   
5.         top: 100px;
   
6.         width: 1200px;
   
7.         min-height: 300px;
   
8.         box-shadow: 2px 2px 4px 1px  rgba(0,0,0,.2);
   
9.         background: transparent;
   
10. }
    
11. .sBox {
    
12.         background: #aaa;
    
13.         text-align: center;
    
14. }
    
15. .sBox h2, p { padding: 10px; }
    
16. 
    
17. .marq {
    
18.         margin: 10px auto;
    
19.         position: relative;
    
20.         top: -620px;
    
21.         left: -120px;
    
22.         width: 50%;
    
23.         animation: goNow 10s linear infinite alternate;
    
24. }
    
25. @keyframes goNow {
    
26.         from { transform: translate(0,0); }
    
27.         to { transform: translateX(-50%); }
    
28. }
    
29. 
    
30. .btnDiv {
    
31.         position: relative;
    
32.         width: 32px;
    
33.         height: 32px;
    
34.         border: none;
    
35.         background: #035575;
    
36.         border-radius: 50%;
    
37.         box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
    
38.         cursor: pointer;
    
39. }
    
40. 
    
41. .btnDiv:hover {
    
42.         opacity: .8;
    
43.         box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
    
44. }
    
45. 
    
46. .btnDiv:active {
    
47.         opacity: .8;
    
48.         box-shadow: 1px 1px 1px 0px rgba(0,0,0,.9);
    
49. }
    
50. 
    
51. .btn-play {
    
52.         position: absolute;
    
53.         width: 0px;
    
54.         height: 0px;
    
55.         border: 10px solid #000;
    
56.         border-top-color:transparent;
    
57.         border-right-color:transparent;
    
58.         border-bottom-color:transparent;
    
59.         border-left-color:#eee;
    
60.         left: 12px;
    
61.         top: 6px;
    
62. }
    
63. 
    
64. .btn-pause {
    
65.         position: absolute;
    
66.         display:none;
    
67.         width: 2px;
    
68.         height: 20px;
    
69.         border-right: 4px solid #eee;
    
70.         border-bottom:0px;
    
71.         border-left: 4px solid #eee;
    
72.         left: 11px;
    
73.         top: 6px;
    
74. }
    
75. </style>
    
76. 
    
77. <div class="mBox">
    
78.         <div class="sBox">
    
79.                 <img src="https://638183.freep.cn/638183/Pic/xuehua.jpg" alt="" />
    
80.         </div>
    
81. </div>
    
82. <h2 class ="marq">阿尔法 - 中国(维语版)</h2>
    
83. <audio id="ymusic" src="http://www.kumeiwp.com/sub/filestores/2021/09/26/ef22b4ac5961fdf344558aa51a913d6f.mp3"></audio>
    
84. <div id="btnDiv" class="btnDiv">
    
85.         <div id="btn-play" class="btn-play"></div>
    
86.         <div id="btn-pause" class="btn-pause"></div>
    
87. </div>
    
88. 
    
89. <script language="javascript">
    
90. 
    
91. //JS代码
    
92. var mu = document.getElementById('ymusic');
    
93. var btn = document.getElementById('btnDiv');
    
94. var playbtn = document.getElementById('btn-play');
    
95. var pausebtn = document.getElementById('btn-pause');
    
96. 
    
97. btn.onclick = function(){ iplay(1); }
    
98. mu.addEventListener("ended", function(){ iplay(0); })
    
99. 
    
100. function iplay(flag){
     
101.         if(flag==1){
     
102.                 mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
     
103.         }else{
     
104.                 playbtn.style.display= "block";
     
105.                 pausebtn.style.display = "none";
     
106.         }
     
107. }
     
108. </script>

复制代码

链接：https://www.huachaowang.com/thread-56156-1-1.html

红影

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

嗯嗯，有这个模板，应该不会再犯之前的错了

马黑黑

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

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

红影

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

你下面还附了真实案例，更便于理解了

马黑黑

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

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

红影

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

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

马黑黑

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

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