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

红影创意的代码实现（测试）

本帖最后由 马黑黑 于 2022-1-19 15:02 编辑 <br /><br /><style type="text/css">
.m-box { /* 主窗体 */
        margin: 0 auto;
        position: relative;
        width: 700px;
        height: 467px;
        background: transparent url('https://pic.imgdb.cn/item/61e673e62ab3f51d91ff8618.jpg') no-repeat;
}
/* 主窗体图片共性 */
.m-box img { position: absolute; left:0; top:0; cursor:pointer; }
#fly { display: block; }/* 飞翔 */
#drop { display: none; }/* 落下 */
/* 以下是播放暂停按钮 */
#btn-box { position: relative; background: transparent; width: 32px; height: 32px; }
#btn-box div { position: absolute; left: 0; top: 0; width: 32px; height: 32px; outline: none; border: none; border-radius: 50%; background: #fff; box-shadow: 2px 2px 4px 1px rgba(0,0,0,.8); opacity: .5; cursor: pointer; }
#btn-box div:hover { opacity: .8; box-shadow: 2px 2px 4px 1px rgba(0,0,0,.7); }
#btn-box div:active { opacity: .8; box-shadow: 1px 1px 1px 1px rgba(0,0,0,.9); }
#btn-play::before { content: ""; position: absolute; width: 0; height: 0; left: 13px; top: 8px; border: 8px solid transparent; border-left-color: #000; background: #fff; }
#btn-pause { display: none; }
#btn-pause::before { content: ""; position: absolute; width: 2px; height: 10px; left: 10px; top: 10px;border: 0;border-left: 4px solid #000; border-right: 4px solid #000;         background: #fff; }

</style>

<div class="m-box">
        <img id="fly" src="https://pic.imgdb.cn/item/61e678a22ab3f51d9104f95d.gif" alt="" />
        <img id="drop" src="https://pic.imgdb.cn/item/61e78ce72ab3f51d91d68242.jpg" alt="" />
        <div id="btn-box" style="top:400px; left:600px;"><div id="btn-play"></div><div id="btn-pause"></div></div>
</div>

<audio id="ymusic" src="https://www.80wp.com/wj/107164/798b655ee49c826ebdce587061063622.mp3" autoplay="autoplay" loop="loop"></audio>
<script>

var btn = document.getElementById('btn-box');
var mu = document.getElementById('ymusic');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');
var d = document.getElementById('fly');
var f = document.getElementById('drop');

d.onclick = function(){ d.style.display="none"; f.style.display="block"; iplay(1); }
f.onclick = function(){ d.style.display="block"; f.style.display="none"; iplay(1); }
mu.autoplay ? (playbtn.style.display="none", pausebtn.style.display="block") : (playbtn.style.display="block", pausebtn.style.display="none");
btn.onclick = function(){ iplay(1); }
mu.addEventListener("ended", function(){ iplay(0); d.style.display="none"; f.style.display="block"; })
function iplay(flag){
      if(flag==1){
                mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block", d.style.display="block", f.style.display="none") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none", d.style.display="none", f.style.display="block");
      }else{ playbtn.style.display = "block"; pausebtn.style.display = "none";         }
}
</script>

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

按钮不要图片的，不协调

马黑黑 发表于 2022-1-19 14:09

本帖最后由 马黑黑 于 2022-1-19 14:50 编辑

帖子代码（提供少量说明）：
<style type="text/css">
.m-box { /* 主窗体 */
      margin: 0 auto;
      position: relative;
      width: 700px;
      height: 467px;
      background: transparent url('https://pic.imgdb.cn/item/61e673e62ab3f51d91ff8618.jpg') no-repeat;
}
/* 主窗体图片共性 */
.m-box img { position: absolute; left:0; top:0; cursor:pointer; }
#fly { display: block; }/* 飞翔 */
#drop { display: none; }/* 落下 */
/* 以下是播放暂停按钮 */
#btn-box { position: relative; background: transparent; width: 32px; height: 32px; }
#btn-box div { position: absolute; left: 0; top: 0; width: 32px; height: 32px; outline: none; border: none; border-radius: 50%; background: #fff; box-shadow: 2px 2px 4px 1px rgba(0,0,0,.8); opacity: .5; cursor: pointer; }
#btn-box div:hover { opacity: .8; box-shadow: 2px 2px 4px 1px rgba(0,0,0,.7); }
#btn-box div:active { opacity: .8; box-shadow: 1px 1px 1px 1px rgba(0,0,0,.9); }
#btn-play::before { content: ""; position: absolute; width: 0; height: 0; left: 13px; top: 8px; border: 8px solid transparent; border-left-color: #000; background: #fff; }
#btn-pause { display: none; }
#btn-pause::before { content: ""; position: absolute; width: 2px; height: 10px; left: 10px; top: 10px;border: 0;border-left: 4px solid #000; border-right: 4px solid #000;         background: #fff; }

</style>

<div class="m-box">
      <img id="fly" src="https://pic.imgdb.cn/item/61e678a22ab3f51d9104f95d.gif" alt="" />
      <img id="drop" src="https://pic.imgdb.cn/item/61e78ce72ab3f51d91d68242.jpg" alt="" />
      <div id="btn-box" style="top:400px; left:600px;"><div id="btn-play"></div><div id="btn-pause"></div></div>
</div>

<audio id="ymusic" src="https://www.80wp.com/wj/107164/798b655ee49c826ebdce587061063622.mp3" autoplay="autoplay" loop="loop"></audio>
<script>

var btn = document.getElementById('btn-box');
var mu = document.getElementById('ymusic');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');
var d = document.getElementById('fly');
var f = document.getElementById('drop');

d.onclick = function(){ d.style.display="none"; f.style.display="block"; iplay(1); }
f.onclick = function(){ d.style.display="block"; f.style.display="none"; iplay(1); }
mu.autoplay ? (playbtn.style.display="none", pausebtn.style.display="block") : (playbtn.style.display="block", pausebtn.style.display="none");
btn.onclick = function(){ iplay(1); }
mu.addEventListener("ended", function(){ iplay(0); d.style.display="none"; f.style.display="block"; })
function iplay(flag){
      if(flag==1){
                mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block", d.style.display="block", f.style.display="none") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none", d.style.display="none", f.style.display="block");
      }else{ playbtn.style.display = "block"; pausebtn.style.display = "none";         }
}
</script>

马黑黑 发表于 2022-1-19 14:13

代码有些乱，有空整理一下再发在三楼，先将就看看

马黑黑 发表于 2022-1-19 14:18

@红影

樵歌 发表于 2022-1-19 14:19

谁按要被天打雷劈。{:4_189:}

马黑黑 发表于 2022-1-19 14:20

樵歌 发表于 2022-1-19 14:19
谁按要被天打雷劈。

是呀，按天使，罪过，我按了好多次{:4_170:}

红影 发表于 2022-1-19 14:44

马黑黑 发表于 2022-1-19 14:13
代码有些乱，有空整理一下再发在三楼，先将就看看

辛苦黑黑了，居然要这么复杂，不容易呢{:4_187:}

红影 发表于 2022-1-19 14:45

马黑黑 发表于 2022-1-19 14:20
是呀，按天使，罪过，我按了好多次

你是为了测试吧，结果却被罪过了{:4_189:}

红影 发表于 2022-1-19 14:48

马黑黑 发表于 2022-1-19 14:08
按钮不要图片的，不协调

原来按图片和按钮都同时能控制的。这个厉害了{:4_199:}
刚看到也有按钮：））

马黑黑 发表于 2022-1-19 15:06

红影 发表于 2022-1-19 14:48
原来按图片和按钮都同时能控制的。这个厉害了
刚看到也有按钮：））

这个按钮给队长准备的，不然老被雪覆盖住{:4_170:}

红影 发表于 2022-1-19 15:12

马黑黑 发表于 2022-1-19 15:06
这个按钮给队长准备的，不然老被雪覆盖住

是啊，铲雪都来不及{:4_189:}

马黑黑 发表于 2022-1-19 15:20

红影 发表于 2022-1-19 15:12
是啊，铲雪都来不及

挺好玩的

红影 发表于 2022-1-19 15:30

马黑黑 发表于 2022-1-19 15:20
挺好玩的

嗯嗯，弄点好玩的，特别有趣{:4_173:}

马黑黑 发表于 2022-1-19 15:54

红影 发表于 2022-1-19 15:30
嗯嗯，弄点好玩的，特别有趣

乐此不疲

红影 发表于 2022-1-19 20:46

马黑黑 发表于 2022-1-19 15:54
乐此不疲

也算恶搞的一种吧。把那张停止的图图乱弄了一下，自己看看还不错{:4_189:}

马黑黑 发表于 2022-1-19 20:52

红影 发表于 2022-1-19 20:46
也算恶搞的一种吧。把那张停止的图图乱弄了一下，自己看看还不错

这个创意不错。高端的实现是图片慢慢落下来

樵歌 发表于 2022-1-19 20:56

马黑黑 发表于 2022-1-19 14:20
是呀，按天使，罪过，我按了好多次

我保证不按了。{:4_189:}

马黑黑 发表于 2022-1-19 21:02

樵歌 发表于 2022-1-19 20:56
我保证不按了。

按那个按钮可以{:4_170:}

红影 发表于 2022-1-19 21:49

马黑黑 发表于 2022-1-19 20:52
这个创意不错。高端的实现是图片慢慢落下来

天使坠落？然后还脸朝地？{:4_189:}
页: [1] 2
查看完整版本: 红影创意的代码实现（测试）