论坛 › 欢乐水吧 › 抓小偷

绿叶清舟 发表于 2022-7-10 12:01

抓小偷

本帖最后由 绿叶清舟 于 2022-7-10 19:27 编辑 <br /><br /><style>
#papa { left: -200px; width: 1000px; height: 700px; background: blue url('https://pic.imgdb.cn/item/62ca4b52f54cd3f937cf2d34.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#hunter { position: absolute; width: 220px; height: 276px; transition: all 3s; z-index: 99; }
#prey { position: absolute; width: 160px; height: 180px; border-radius: 50%; }
#btnplay { position: absolute;left: 20px; top: 20px; width: 30px; height: 30px; cursor: pointer; border: none; outline: none; border-radius: 50%; }
#btnplay:hover { color: red; box-shadow: 1px 1px 1px #000; }
#lrcbox { position: absolute;left: 60px;top: 20px;font: normal 1.2em / 1.6em '宋体', sans-serif;color: snow;text-shadow: 1px 1px 2px #000; }
</style>

<div id="papa">
      <input id="btnplay" type="button" value=">" />
      <div id="lrcbox">LRC LOADING ...</div>
      <img id="hunter" alt="" src="https://pic.imgdb.cn/item/62ca4ba6f54cd3f937cf7f82.gif" />
      <img id="prey" src="https://pic.imgdb.cn/item/62ca4b8cf54cd3f937cf65a8.gif" alt="" />
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1412506960.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let lrcAr = [
      ['0.00','曲名 : 抓小偷'],
      ['5.00','歌手 : 郑云'],
      ['10.00','所属专辑：抓小偷'],
      ['160.00','天网恢恢']
];

let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setTimeout(gogo,100);
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate',function(){
      let tt = aud.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr) lrcbox.innerHTML = lrcAr;
      }
});

function gogo() {
      let left = num(50,800), top = num(420,518);
      prey.style.left = left + 'px';
      prey.style.top = top + 'px';
      hunter.style.left = left + 110 + 'px';
      hunter.style.top = top - 50 + 'px';
      setTimeout(gogo,6000);
}
</script>

四海八荒 发表于 2022-7-10 12:31

现在都是高科技犯罪了，小偷多生存空间越来越窄小

四海八荒 发表于 2022-7-10 12:32

小时候玩游戏，都想当警察，不想当小偷，让谁当小偷得许好处

红影 发表于 2022-7-10 12:57

哈哈，还真有这歌曲啊。清舟这个追随效果做得好，非常有趣{:4_199:}

红影 发表于 2022-7-10 12:57

小偷走到哪警察叔叔追到哪，看他往哪跑{:4_170:}

大猫咪 发表于 2022-7-10 13:16

清舟真会玩{:4_189:}{:4_204:}

小九 发表于 2022-7-10 13:31

想起一个小品，陈佩斯和朱时茂演的

加林森 发表于 2022-7-10 14:46

清舟的制作真有灵气。有意思！

梦油 发表于 2022-7-10 15:28

真棒，真棒！做坏事儿的人没有好果子。


俺没分了{:4_201:}

马黑黑 发表于 2022-7-10 15:42

小九 发表于 2022-7-10 13:31
想起一个小品，陈佩斯和朱时茂演的

我也是第一时间想到这个

马黑黑 发表于 2022-7-10 15:43

加林森 发表于 2022-7-10 14:46
清舟的制作真有灵气。有意思！

这个你得学学，要有自己的构思

马黑黑 发表于 2022-7-10 15:44

四海八荒 发表于 2022-7-10 12:32
小时候玩游戏，都想当警察，不想当小偷，让谁当小偷得许好处

看样纸小偷其实是个好职业{:4_196:}

加林森 发表于 2022-7-10 16:09

马黑黑 发表于 2022-7-10 15:43
这个你得学学，要有自己的构思

我刚回来。我先去找歌曲听听再来制作。

绿叶清舟 发表于 2022-7-10 16:24

四海八荒 发表于 2022-7-10 12:31
现在都是高科技犯罪了，小偷多生存空间越来越窄小

会不会也变成保护动物了啊{:4_189:}

绿叶清舟 发表于 2022-7-10 16:26

红影 发表于 2022-7-10 12:57
小偷走到哪警察叔叔追到哪，看他往哪跑

就是抓不到{:4_189:}

绿叶清舟 发表于 2022-7-10 16:27

大猫咪 发表于 2022-7-10 13:16
清舟真会玩

没想到会搜到这歌啊{:4_189:}

绿叶清舟 发表于 2022-7-10 16:27

小九 发表于 2022-7-10 13:31
想起一个小品，陈佩斯和朱时茂演的

是啊，很经典的也看过了

绿叶清舟 发表于 2022-7-10 16:27

加林森 发表于 2022-7-10 14:46
清舟的制作真有灵气。有意思！

谢谢队长，真好有这歌啊

绿叶清舟 发表于 2022-7-10 16:28

梦油 发表于 2022-7-10 15:28
真棒，真棒！做坏事儿的人没有好果子。




谢谢梦油，没关系的不用客气了

绿叶清舟 发表于 2022-7-10 16:35

马黑黑 发表于 2022-7-10 15:42
我也是第一时间想到这个

还是会跑到图片外面来 let left = num(50,1000), top = num(420,518);是改这个数字？

查看完整版本: 抓小偷