首页 > 其他 > 详细

添加购物车之小球半场动画的实现

时间:2020-02-01 21:03:15      阅读:66      评论:0      收藏:0      [点我收藏+]
 问题:不同分辨率下小球移动至购物车徽标
解决:不能把位置横纵坐标写死,根据不同情况动态计算这个坐标值
先得到徽标的横纵坐标再得到小球的横纵坐标,然后横坐标值求差,纵坐标值求差,结果就是要移动的距离

Vue 中不推荐操作DOM元素,解决不了稍微写一点还可以。

小球横纵坐标:
            const ballLeft = document.getElementById(‘ball‘).getBoundingClientRect().left;
            const ballTop = document.getElementById(‘ball‘).getBoundingClientRect().top;
            // console.log(ballLeft)
            // console.log(ballTop)

   徽标横纵坐标:

            const shopCarLeft = document.getElementById(‘shopCar‘).getBoundingClientRect().left;
            const shopCarTop = document.getElementById(‘shopCar‘).getBoundingClientRect().top;
            // console.log(shopCarLeft)
            // console.log(shopCarTop)

求差值,差值就是小球要移动的坐标距离

            const X = shopCarLeft - ballLeft;
            const Y = shopCarTop - ballTop;
            // console.log(X,Y)

最后,使用模板字符串

el.style.transform = `translate(${X}px,${Y}px)`;

 

添加购物车之小球半场动画的实现

原文:https://www.cnblogs.com/zhaohui-116/p/12249981.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!