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

最新推荐文章于 2023-02-14 10:22:12 发布

转载最新推荐文章于 2023-02-14 10:22:12 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#jquery #动画 #前端

网站模版专栏收录该内容

3170 篇文章

订阅专栏

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

下载地址

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移动动画效果。您可以修改这个动画基于您的需要。