购物车飞行图像,jQuery加入购物车动画

amohan

于 2021-11-09 10:47:50 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

分类专栏：网站模版文章标签： jquery 动画前端

原文链接：https://yy123.ink/frontDetail/12833

网站模版专栏收录该内容

3170 篇文章

订阅专栏

该博客介绍了如何利用jQuery创建一个商品图片飞入购物车的动画效果，通过克隆图片元素并调整其位置和大小，实现平滑的动画过渡。动画效果采用了easeInElastic，可以依据需求进行自定义修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址

jQuery代码飞到购物车$(".add-to-cart").click(function() { var cart = $(".shopping_bg"); var imgtofly = $(this).parents("li.cart_items").find("a.product-image img").eq(0); if (imgtofly) { var imgclone = imgtofly.clone() .offset({ top:imgtofly.offset().top, left:imgtofly.offset().left }) .css({"opacity":"0.7", "position":"absolute", "height":"150px", "width":"150px", "z-index":"1000"}) .appendTo($("body")) .animate({ "top":cart.offset().top + 10, "left":cart.offset().left + 30, "width":55, "height":55 }, 1000, "easeInElastic"); imgclone.animate({"width":0, "height":0}, function(){ $(this).detach() }); } return false;});使用easeInElastic移动动画效果。您可以修改这个动画基于您的需要。

dd: