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

Fly to cart effect - generic image

本文关键字：-通 图像 购物车      更新时间：2023-09-26

到处都找不到解决办法，所以就这样了。

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

与其让页面上呈现的图像飞到篮子上，我如何用通用图像覆盖它呢?例如:http://lorempixel.com/400/200/----我将使用的路径将是一个图像文件夹

我已经找到了jQuery飞到购物车效果的最佳解决方案-使用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'));
   });
});

如果您想将产品图像更改为自定义图像，那么您可以通过更改你的代码从这里:

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
}) // ...

点击这里查看工作示例:点击

当然要更改imgClone变量的名称，以便与其所做的相匹配，或者甚至删除它并在代码中进一步使用$img_to_move。

相关文章：