在帖子中使用跟随的小鸟

马黑黑 · 发表于 2022-7-18 07:13

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-7-18 07:26

之前，小鸟是脱离于帖子父元素的，与父元素并列存在。这是考虑了减少偏移计算节约代码，但它显然依赖于合适的环境：发帖节点之上没有其他元素使用过定位的父辈及以上辈分的元素。

昨天小辣椒说过期待我的发帖，其实说的就是把能够跟随鼠标点击的小鸟能用于帖子。虽然此前的方案（即img与帖子父元素并列）也可以，但大家可能不习惯，认为小鸟应该是帖子的组成部分。

这就要加入偏移量的计算。小鸟放入帖子作为子元素后，帖子的父元素是有定位的，小鸟又是依托父元素而存在，计算小鸟应移动的距离就得考虑帖子父框和更高层备份的可能偏移总量。关于计算指定节点以上的父辈元素的偏移总量，以前做播放器进度控制时弄过，代码重用即可，就是用递归的方法计算全部的父辈元素的偏移总和。

一楼的效果，代码放在后面的回复。

马黑黑 · 发表于 2022-7-18 07:26

一楼代码：

<style>
#papa {
margin: auto;
width: 1024px;
height: 640px;
background: linear-gradient(180deg, #0C003C 0%, #BFFFAF 100%), linear-gradient(165deg, #480045 25%, #E9EAAF 100%), linear-gradient(145deg, #480045 25%, #E9EAAF 100%), linear-gradient(300deg, rgba(233, 223, 255, 0) 0%, #AF89FF 100%), linear-gradient(90deg, #45EBA5 0%, #45EBA5 30%, #21ABA5 30%, #21ABA5 60%, #1D566E 60%, #1D566E 70%, #163A5F 70%, #163A5F 100%);
background-blend-mode: overlay, overlay, overlay, multiply, normal;
box-shadow: 4px 4px 28px #000;
position: relative;
}
#bird {
position: absolute;
width: 73px;
height: 83px;
left: 50%;
top: 500px;
transition: left 2s, top 2s;
}
</style>
<div id="papa">
<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>
</div>
<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;
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(180deg)' : 'rotateY(0deg)';
lastX = x;
bird.style.left = x + 'px';
bird.style.top = y + 'px';
});
function offset(obj,direction){//偏移总量
let offsetDir = "offset" + direction[0].toUpperCase()+direction.substring(1);
let realNum = obj[offsetDir];
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent[offsetDir];
positionParent = positionParent.offsetParent;
}
return realNum;
}
</script>

复制代码

马黑黑 · 发表于 2022-7-18 07:31

小鸟可以在帖子里跟随鼠标的单击，也可以在帖子外跟随。效果和昨天发的元素并列关系的其实一样，不同的是，小鸟现在是帖子里的子元素，是帖子的组成内容。

另外，昨天做的，第一次点击小鸟立即到达，那是因为CSS里使用了默认的left和top值，即没有设定。设定之后，第一次单击也是按 transition 规定的速率运动。