jquery 商品飞入购物车的动画

标签: jquery 动画 购物车
213人阅读 评论(0) 收藏 举报
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:14
  • 2775

jQuery点击商品动画飞入加入购物车动画效果代码

  • 2017年04月12日 11:37
  • 379KB
  • 下载

jQuery加入购物车飞入动画特效

  • 2015年10月25日 10:03
  • 190KB
  • 下载

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

学习在于积累,今天利用jquery.fly实现仿淘宝购物车飞入特效,虽然实现起来简单,但实际使用时有一堆坑需要注意。结合实际项目经验,我简单的总结了一下到底有哪些坑需要去填。参考网址:github:h...
  • qq_33401924
  • qq_33401924
  • 2016-11-23 17:34:50
  • 5486

jQuery实现商品飞入购物车效果插件

本文原地址:http://www.daimajiayuan.com/sitejs-18635-1.html HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 s...
  • elzjm
  • elzjm
  • 2015-04-28 16:59:49
  • 1386

Android将商品加入购物车的动画效果

/** * 把商品添加到购物车的动画效果 */ private void addCart() { String imgUrl = productDetail...
  • Shirly_YY
  • Shirly_YY
  • 2016-12-06 15:30:41
  • 852

购物车飞入的动画效果

网盘下载地址:链接: https://pan.baidu.com/s/1kVwNYPD 密码: dyda 懒人原生模拟移动APP飞入购物车动画效果 ...
  • kakaxiD
  • kakaxiD
  • 2016-12-28 10:19:24
  • 1248

已解决,关于加入购物车飞入效果的jquery.fly.js插件

我页面上有个position:fixed;的div,从这里面点击加入购物车飞出一个到顶部的 position:fixed;的header里面,这个div在页面下拉的时候是不动的,header也是不动的...
  • qq_39684283
  • qq_39684283
  • 2017-12-22 14:28:18
  • 337

jquery天猫商城加入购物车动画淘宝飞入购物车

  • 2017年08月10日 15:38
  • 155KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 9万+
    积分: 1377
    排名: 3万+
    文章分类
    最新评论