论坛 › 马黑黑教程专版 › 《跟我走》代码解析

马黑黑 发表于 2022-7-17 15:40

《跟我走》代码解析

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

<img id="bird" src="/data/attachment/forum/202207/17/112951jm0vqgv98w8z3h3z.gif" alt="">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5268746.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
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;
        if(x + bw >= w) x = w - bw;
        if(y + bh >= h) y = h - bh;
        bird.style.transform = x > lastX ? 'rotateY(180deg)' : 'rotateY(0deg)';
        console.log(x,lastX,x > lastX);
        lastX = x;
        bird.style.left = x + 'px';
        bird.style.top = y + 'px';
});

</script>

马黑黑 发表于 2022-7-17 15:40

本帖最后由 马黑黑 于 2022-7-17 15:49 编辑

一、CSS部分
极其简单，移动对象用了绝对定位，设置好尺寸和动画周期用时。

#bird {
        position: absolute;
        width: 73px;
        height: 83px;
        transition: left 2s, top 2s;
}


二、HTML部分

更简单，就一行，img标签：

<img id="bird" src="../bird.gif" alt="" />

三、JS部分

也不复杂，代码和注释如下——

let lastX = 0; // 用于记录上一次位置的X坐标

//页面监听鼠标单击事件
document.addEventListener('click', (e) => {
        e = event || window.event; // 照顾一下非chromium内核的浏览器
        let x = e.pageX, y = e.pageY, //分别获得鼠标按下时的xy坐标值
                w = document.body.clientWidth, h = document.body.clientHeight,//获得移动对象宽度
                bw = bird.offsetWidth, bh = bird.offsetHeight; //获得移动对象高度
        if(x + bw >= w) x = w - bw; // X坐标值边界处理
        if(y + bh >= h) y = h - bh; // Y坐标值边界处理
        bird.style.transform = x > lastX ? 'rotateY(180deg)' : 'rotateY(0deg)'; //设置运动对象朝向
        lastX = x; //记录本次X坐标（下次使用）
        bird.style.left = x + 'px'; // 设置运动对象 left 值
        bird.style.top = y + 'px'; // 设置运动对象 top 值
});

马黑黑 发表于 2022-7-17 15:40

本帖最后由 马黑黑 于 2022-7-17 15:56 编辑

思路：
鼠标按下时可以通过 pageX 和 pageY 得到鼠标指针相对页面左上角的xy坐标值，依此坐标值设定运动对象的 left 和 top 值便可以“指挥”运动对象来到xy这个点上来，指挥的方式实际上是通过动态设置运动对象的 left 和 top 的值。鼠标单击动作触发的left和top的改变本来是瞬间完成，由于 transition 规范了运动时长，动作就按这个预设时间运行。

梦油 发表于 2022-7-17 18:06

它好像是我家的鸟，叫它去哪儿就去哪儿。
套用一句电影台词，“高，实在是高。”

醉美水芙蓉 发表于 2022-7-17 18:47

马黑黑 发表于 2022-7-17 19:05

醉美水芙蓉 发表于 2022-7-17 18:47
很有趣！点一下小鸟就飞来了！

这个玩玩是可以的吧

马黑黑 发表于 2022-7-17 19:06

梦油 发表于 2022-7-17 18:06
它好像是我家的鸟，叫它去哪儿就去哪儿。
套用一句电影台词，“高，实在是高。”

喝茶喝茶
{:4_180:}

小辣椒 发表于 2022-7-17 19:46

黑黑我一直把小鸟点到我的回帖对话框了{:4_172:}

小辣椒 发表于 2022-7-17 19:47

回帖后又跟我上去了

小辣椒 发表于 2022-7-17 19:49

太好玩了

梦油 发表于 2022-7-17 20:32

马黑黑 发表于 2022-7-17 19:06
喝茶喝茶

出奇制胜。

红影 发表于 2022-7-17 20:35

这个讲得真清楚，黑黑厉害{:4_187:}

马黑黑 发表于 2022-7-17 21:25

红影 发表于 2022-7-17 20:35
这个讲得真清楚，黑黑厉害

自己写的解释一下还可以的

马黑黑 发表于 2022-7-17 21:26

梦油 发表于 2022-7-17 20:32
出奇制胜。

{:5_108:}

马黑黑 发表于 2022-7-17 23:22

小辣椒 发表于 2022-7-17 19:46
黑黑我一直把小鸟点到我的回帖对话框了

你能喂它虫子它会唱ABC歌

红影 发表于 2022-7-18 16:42

马黑黑 发表于 2022-7-17 21:25
自己写的解释一下还可以的

思路非常清晰{:4_187:}

马黑黑 发表于 2022-7-18 19:08

红影 发表于 2022-7-18 16:42
思路非常清晰

嗯，还没到老糊涂的境地吧

红影 发表于 2022-7-18 20:25

马黑黑 发表于 2022-7-18 19:08
嗯，还没到老糊涂的境地吧

搞技术的人越老越是炉火纯青呢。

马黑黑 发表于 2022-7-18 20:28

红影 发表于 2022-7-18 20:25
搞技术的人越老越是炉火纯青呢。

也不是，是越老越糊涂

红影 发表于 2022-7-19 16:57

马黑黑 发表于 2022-7-18 20:28
也不是，是越老越糊涂

那么到多少岁了才算老呢？

查看完整版本: 《跟我走》代码解析