jquery 商品飞入购物车的动画

本文介绍了一种使用jQuery实现的商品图片加入购物车的动画效果。点击按钮后,选定的图片会以动画形式缩小并移动到购物车图标位置。此功能在PC端表现良好,在移动端可能因配置问题而出现卡顿。
var img = $(this).parent().prev().find('img');
var flyElm = img.clone().css('opacity', 0.75);
$('body').append(flyElm);
flyElm.css({
'z-index' : 9000,
'display' : 'block',
'position' : 'absolute',
'top' : img.offset().top + 'px',
'left' : img.offset().left + 'px',
'width' : img.width() + 'px',
'height' : img.height() + 'px'
});
flyElm.animate({
top : $('.am-icon-shopping-cart').offset().top,
left : $('.am-icon-shopping-cart').offset().left,
width : 5,
height : 5
}, 'slow', function() {
flyElm.remove();

});

<div><img src=""></img></div>

<div onclick="addtocart():">add to cart</div>

<div calss="am-icon-shopping"></div>

仅限于个人实现的功能,代码没完全贴出来,但可以简单修改后直接使用。大概的逻辑:点击某个按钮,根据该按钮定位同级下或者父级下的img标签,然后把该图片渐变缩小放到购物车的图标中。

说明:在pc网页端动画完美展示,如若在移动端,动画有卡顿,配置问题。相对于移动端,jquery的某些功能还是太重量级了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值