当前位置：首页 > 下载站 > js特效 > jQuery特效 > jQuery加入购物车商品飞入动画特效

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

分类: js特效 / jQuery特效	发布时间: 2018-05-15	访问量: 2011
下载量: 65

点击下载预览效果

更多>

最新下载

css鼠标悬停图片高亮效果

css鼠标悬停图片高亮效果是一款不需要js即可实现的鼠标悬停图片高亮效果。

0 2025-12-25

CSS3带图标和占位符的登录表单

CSS3带图标和占位符的登录表单是一款基于CSS3制作的黑色简单用户名密码登录表单特效。

0 2025-12-25

jQuery音乐歌单列表播放器代码

jQuery音乐歌单列表播放器代码是一款适用于音乐网站在线试听播放器代码。

0 2025-12-25

jQuery新零售模式手风琴代码

基于jQuery绿色简洁风格的新零售介绍手风琴切换展示代码。京东到家模式，美团外卖模式，同城电商模式，社区新零售模式4种手风琴滑动切换效果。

0 2025-12-25

jquery+css3动画弹出表单提交代码

jquery+css3动画弹出表单提交代码是一款jquery对话框插件制作css3动画弹出表单提交代码。

0 2025-12-25

HTML5百叶窗开场文字展示特效

HTML5百叶窗开场文字展示特效是一款js基于anime制作的全屏百叶窗动态背景和文字动画效果代码。

0 2025-12-25

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

14434 2025-08-28
CSS3 教程

1541474 2025-08-27
Rust 教程

22122 2025-08-27
Vue 教程

24619 2025-08-22
PostgreSQL 教程

21307 2025-08-21
Git 教程

8405 2025-08-21

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

代码片段：

js代码

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src='js/jquery-ui.min.js'></script>
<script type="text/javascript">
$('.add-to-cart').on('click', function () {
	var cart = $('.shopping-cart');
	var imgtodrag = $(this).parent('.item').find('img').eq(0);
	if (imgtodrag) {
		var imgclone = imgtodrag.clone().offset({
			top: imgtodrag.offset().top,
			left: imgtodrag.offset().left
		}).css({
			'opacity': '0.5',
			'position': 'absolute',
			'height': '150px',
			'width': '150px',
			'z-index': '100'
		}).appendTo($('body')).animate({
			'top': cart.offset().top + 10,
			'left': cart.offset().left + 10,
			'width': 75,
			'height': 75
		}, 1000, 'easeInOutExpo');
		setTimeout(function () {
			cart.effect('shake', { times: 2 }, 200);
		}, 1500);
		imgclone.animate({
			'width': 0,
			'height': 0
		}, function () {
			$(this).detach();
		});
	}
});
</script>