|
|

楼主 |
发表于 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 值
});
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|