近朱者赤 发表于 2022-7-27 22:28

学习代码测试

<style>
#papa { left: -292px; width: 1200px; height: 666px; background: #333 url('https://638183.freep.cn/638183/t22/hl/river.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #7e6f52; position: relative; }
#boat { position: absolute; width: 180px; height: 88px; top: calc(100% - 100px); filter: blur(1px); animation: boating 36s linear infinite; }
#playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; background: rgba(255,255,255,.2); border-radius: 6px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox span { margin-left: 10px; font: normal 1.2em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
@keyframes boating { from { left: 100%; } to { left: -200px; } }

#bird {
      position: absolute;
      width: 73px;
      height: 83px;
      left: 50%;
      top: 120px;
      transition: left 2s, top 2s;
}
</style>




<div id="papa">
        <img id="boat" src='https://638183.freep.cn/638183/t22/hl/boat.gif' alt="" />

         <img id="bird" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif" alt="" />

        <div id="playbox"><input id="btnplay" type="button" value=">" /><span>测试曲目： 江河水 </span></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35847825.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');



let lastX = 0;
document.addEventListener('click', (e) => {
      e = event || window.event;
      let x = e.pageX, y = e.pageY,
                w = document.body.clientWidth, h = document.body.clientHeight,
                bw = bird.offsetWidth, bh = bird.offsetHeight;
      x = x - offset(papa, 'left');
      y = y - offset(papa, 'top');
      if(x + bw >= w) x = w - bw;
      if(y + bh >= h) y = h - bh;
      bird.style.transform = x > lastX ? 'rotateY(0deg)' : 'rotateY(-180deg)';
      lastX = x;
      bird.style.left = x + 'px';
      bird.style.top = y + 'px';
});

function offset(obj,direction){//偏移总量
      let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
      let realNum = obj;
      let positionParent = obj.offsetParent;
      while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
      }
      return realNum;
}



</script>

近朱者赤 发表于 2022-7-27 22:31

哈哈，没有声音{:4_198:}

近朱者赤 发表于 2022-7-27 22:41

感谢马黑黑老师代码分享！不懂代码，纯属复制粘贴瞎搞尝试娱乐。

红影 发表于 2022-7-27 23:00

有声音的，很漂亮。恭喜朱朱测试成功{:4_204:}

加林森 发表于 2022-7-27 23:04

厉害了′把我的鹰也放进去了！{:4_199:}

马黑黑 发表于 2022-7-27 23:51

队长 @加林森 的鹰很神气

加林森 发表于 2022-7-27 23:53

马黑黑 发表于 2022-7-27 23:51
队长 @加林森 的鹰很神气

是啊，这朋友好厉害的。是不是你的化身啊？

马黑黑 发表于 2022-7-27 23:54

加林森 发表于 2022-7-27 23:53
是啊，这朋友好厉害的。是不是你的化身啊？

亚伦

加林森 发表于 2022-7-27 23:55

马黑黑 发表于 2022-7-27 23:54
亚伦

哦，明白了。高手。{:4_203:}

马黑黑 发表于 2022-7-27 23:56

加林森 发表于 2022-7-27 23:55
哦，明白了。高手。

必须的

加林森 发表于 2022-7-27 23:57

马黑黑 发表于 2022-7-27 23:56
必须的

嗯嗯。我知道了。

近朱者赤 发表于 2022-7-28 08:54

红影 发表于 2022-7-27 23:00
有声音的，很漂亮。恭喜朱朱测试成功

谢谢红影老师关注指导{:4_190:}

近朱者赤 发表于 2022-7-28 08:56

加林森 发表于 2022-7-27 23:04
厉害了′把我的鹰也放进去了！

队长老师的鹰效果非常有动态感，借用了{:4_190:}

加林森 发表于 2022-7-28 08:57

近朱者赤 发表于 2022-7-28 08:56
队长老师的鹰效果非常有动态感，借用了

随便用。喜欢就用。

近朱者赤 发表于 2022-7-28 09:00

马黑黑 发表于 2022-7-27 23:54
亚伦

跟着马黑帅老师学习代码，对代码英文有点头痛。感谢老师分享指导{:4_190:}

马黑黑 发表于 2022-7-28 12:17

近朱者赤 发表于 2022-7-28 09:00
跟着马黑帅老师学习代码，对代码英文有点头痛。感谢老师分享指导

不客气，一同学习
页: [1]
查看完整版本: 学习代码测试