jquery 商品飞入购物车的动画

来源:互联网 发布:安卓社交软件 编辑:程序博客网 时间:2024/04/30 23:27
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的某些功能还是太重量级了。

0 0
原创粉丝点击