Question

尝试到处寻找，但无法找到解决方案，所以就这样了。

基于以下脚本 - http://codepen.io/ElmahdiMahmoud/pen/tEeDn

我没有让页面上呈现的图像飞到篮子里，而是如何用通用图像覆盖它，例如：http://lorempixel.com/400/200/ ----我将使用的路径将是到图像文件夹。

Answer 1

我从这里找到了jQuery fly to cart效果的最佳解决方案 - Fly to cart effect using jQuery 这个脚本的使用非常简单，如下所示。

$(document).ready(function(){
   $('.add-to-cart').on('click',function(){
       //Scroll to top if cart icon is hidden on top
       $('html, body').animate({
          'scrollTop' : $(".cart_anchor").position().top
       });
       //Select item image and pass to the function
       var itemImg = $(this).parent().find('img').eq(0);
       flyToElement($(itemImg), $('.cart_anchor'));
   });
});

Answer 2

如果要将产品图像更改为自定义图像，则可以通过更改来实现你的代码来自：

var imgclone = imgtodrag.clone()
                        .offset({
                            top: imgtodrag.offset().top,
                            left: imgtodrag.offset().left
                        }) // ...

为：

// The image that flies to the cart.
var $img_to_move = $('<img src="http://lorempixel.com/400/200/" />');

// use that image
var imgclone = $img_to_move.offset({
    top:  imgtodrag.offset().top,
    left: imgtodrag.offset().left
}) // ...

点击此处查看工作示例：click

并且offcourse改变imgClone变量的名称，使其与其所做的相匹配，甚至删除它，并在代码中进一步使用$img_to_move。没有改变清关。

飞到购物车效果 - 通用图像

2 个答案: