jQuery实现加入购物车飞入动画效果之开发不停,填坑不止(起点位置在Y轴方向位置偏移)

在使用fly.js实现购物车飞入动画时,遇到滚动条导致的起点Y轴偏移和结束位置不一致的问题。通过调整代码,将起点位置减去滚动条高度并确保飞行结束位置相对于浏览器可视窗口固定,成功解决这两个问题。
摘要由CSDN通过智能技术生成

开发时为了完成购物车的飞入抛物线,因为懒惰随大流使用了fly.js插件,用的时候遇到的两个坑坑~~

1. 有滚动条时,抛物体的起点位置在Y轴方向上有位置偏移,偏大

2. 页面有滚动条时,抛物体的结束位置不一样,偏大

我:(⊙o⊙)…烦烦的。。。这就是用别人东西的代价 。。。。。。

不管如何先来解决第一个坑吧

实现加入购物车效果,正常我们是这样使用的(第一次用的话,点击这里查看官方使用说明)

var offset = $('.shopcar .money .box').offset(); //飞行的结束位置:购物车           

flyer = $('<div style="width: 15px;height: 15px;border-radius:100%;background: #0089DC;"></div>');//抛物体

flyer.fly({
                start: {
                    left: e.pageX,//开始位置(必填)#fly元素会被设置成position: fixed
                    top: e.pageY //开始位置(必填)
                },
   
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值