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

开发时为了完成购物车的飞入抛物线,因为懒惰随大流使用了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 //开始位置(必填)
                },
                end: {
      
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
js加入购物车抛物线动画购物车效果特效,亲测可用, 当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入购物车中。本文介绍借助一款基于jQuery动画插件,点击加入购物车按钮时,实现商品将飞入到右侧的购物车中的效果。 HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 复制代码 代码如下: 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。 复制代码 代码如下: ¥3499.00 LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计 加入购物车 ¥3799.00 Hisense/海信 LED50T1A 海信电视官方旗舰店 加入购物车 ¥¥3999.00 Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视 加入购物车 ¥6969.00 乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视 加入购物车 然后,我们还需要在页面的右侧加上购物车以及提示信息。 复制代码 代码如下: 购物车 已成功加入购物车! CSS 我们使用CSS先将商品排列美化,然后设置右侧购物车样式,具体请看代码: 复制代码 代码如下: .box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} .box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} .box:hover{border:1px solid #f90} .box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500} .box h4 span{font-size:20px} .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} .m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;} .cart{color: #fff;t
可以使用jQuery动画函数来实现加入购物车动画效果,具体实现步骤如下: 1. 给“加入购物车”按钮添加点击事件,通过jQuery选择器获取到该按钮元素,并为其添加click事件处理函数。 ```javascript $('#add-to-cart-btn').click(function() { // 动画效果代码 }); ``` 2. 获取到被添加到购物车的商品图片元素,通过jQuery选择器获取到该元素,并获取到该元素的位置信息。 ```javascript var productImg = $('#product-img'); var imgPosition = productImg.offset(); ``` 3. 在页面上添加一个新的图片元素,该元素的src属性值为被添加到购物车的商品图片的src属性值。 ```javascript var cartImg = $('<img src="' + productImg.attr('src') + '">'); ``` 4. 设置新的图片元素的样式,使其定位到被添加到购物车的商品图片的位置,并设置其宽度和高度。 ```javascript cartImg.css({ 'position': 'absolute', 'top': imgPosition.top, 'left': imgPosition.left, 'width': productImg.width(), 'height': productImg.height() }); ``` 5. 将新的图片元素添加到页面上,并使用jQuery的animate函数使其移动到购物车图标的位置,并在动画结束后将其从页面中移除。 ```javascript cartImg.appendTo('body').animate({ 'top': cartIconPosition.top, 'left': cartIconPosition.left, 'width': 0, 'height': 0 }, 1000, function() { $(this).remove(); }); ``` 完整代码如下: ```javascript $('#add-to-cart-btn').click(function() { var productImg = $('#product-img'); var imgPosition = productImg.offset(); var cartIcon = $('#cart-icon'); var cartIconPosition = cartIcon.offset(); var cartImg = $('<img src="' + productImg.attr('src') + '">'); cartImg.css({ 'position': 'absolute', 'top': imgPosition.top, 'left': imgPosition.left, 'width': productImg.width(), 'height': productImg.height() }); cartImg.appendTo('body').animate({ 'top': cartIconPosition.top, 'left': cartIconPosition.left, 'width': 0, 'height': 0 }, 1000, function() { $(this).remove(); }); }); ``` 上述代码实现了一个简单的加入购物车动画效果,可以根据需求进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值