《跟我走》代码解析

马黑黑

马黑黑

一、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 值
});

马黑黑

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

梦油

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

马黑黑

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

这个玩玩是可以的吧

马黑黑

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

喝茶喝茶

小辣椒

黑黑我一直把小鸟点到我的回帖对话框了

小辣椒

回帖后又跟我上去了

小辣椒

太好玩了

梦油

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

出奇制胜。

红影

这个讲得真清楚，黑黑厉害

马黑黑

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

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

马黑黑

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

马黑黑

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

你能喂它虫子它会唱ABC歌

红影

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

思路非常清晰

马黑黑

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

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

红影

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

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

马黑黑

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

也不是，是越老越糊涂

红影

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

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