jquery 商品飞入购物车的动画

原创 2016年08月30日 16:55:57
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的某些功能还是太重量级了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Jquery商品飞入购物车动画(全部20行代码)

/**添加购物车时购物车图标动画(褪色效果动画) * 说明:页面需要先引入JQuery *传入参数:需要播放动画的对象 */ function shoppingCartAnimate(dom){ ...
  • Nifury
  • Nifury
  • 2016年06月20日 15:49
  • 2266

商品飞入购物车动画效果

  • 2017年07月10日 11:27
  • 122KB
  • 下载

小程序二次贝塞尔曲线,购物车商品曲线飞入效果

前段时间闲暇的时候看到一个贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。 主要应用到的技术点: 1、小程序wxss布局,以及数据绑定 2、js二次bezier曲...

jquery动画飞入购物车

  • 2015年12月23日 11:24
  • 2.01MB
  • 下载

商品飞入购物车

  • 2017年10月31日 17:41
  • 135KB
  • 下载

小程序二次贝塞尔曲线,购物车商品曲线飞入效果

前段时间闲暇的时候看到一个贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。 主要应用到的技术点: 1、小程序wxss布局,以及数据绑定。 2、js二次be...

商品飞入购物车特效

  • 2016年07月22日 10:41
  • 188KB
  • 下载

利用jquery.fly实现仿淘宝购物车飞入特效

学习在于积累,今天利用jquery.fly实现仿淘宝购物车飞入特效,虽然实现起来简单,但实际使用时有一堆坑需要注意。结合实际项目经验,我简单的总结了一下到底有哪些坑需要去填。参考网址:github:h...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 商品飞入购物车的动画
举报原因:
原因补充:

(最多只允许输入30个字)