jQuery仿淘宝加入购物车动画效果源代码下载

和大家分享一个jQuery加入购物车效果、点击一个商品之后通过抛物线的方式加入购物车、非常不错、此效果是通过一个加入回收站的效果改造的、大家可以通过修改简单的图片和代码就可以轻松的实现加入购物车效果、非常不错

HTML代码

<div class="goods_list">
	<div class="thingsBox">
		<img src="images/1.jpg" onClick="MoveBox(this)"/>
	</div>
	<div class="thingsBox">
		<img src="images/2.jpg" onClick="MoveBox(this)"/>
	</div>
</div>

<div class="shopping_cart">
	<img id="collectBox" src="images/cart.gif"/>
</div>

CSS代码

<style type="text/css">
* {
	margin:0;
	padding:0;
	border:0;
	list-style:none;
}
/* goods_list */
.goods_list {
	width:700px;
	height:500px;
	margin:30px auto;
}
.thingsBox {
	border:1px solid #eee;
	cursor:pointer;
	width:100px;
	height:50px;
	float:left;
	margin:7px;
}
.shopping_cart img {
	width:50px;
	height:50px;
	z-index:2;
	position:fixed;
	bottom:30px;
	right:50%;
	background:#a0a0a0;
	margin-left:-25px;
}
</style>

JS代码

<script type="text/javascript">
function MoveBox(obj) {
	var divTop = $(obj).offset().top;
	var divLeft = $(obj).offset().left;
	$(obj).css({
		"position": "absolute",
		"z-index": "500",
		"left": divLeft   "px",
		"top": divTop   "px"
	});
	$(obj).animate({
		"left": ($("#collectBox").offset().left
			- $("#collectBox").width())   "px",
		"top": ($(document).scrollTop()   30)   "px",
		"width": "80px",
		"height": "30px"
	},
	500,
	function() {
		$(obj).animate({
			"left": $("#collectBox").offset().left   "px",
			"top": $("#collectBox").offset().top   "px",
			"width": "50px",
			"height": "25px"
		},500).fadeTo(0, 0.1).hide(0);
	});
}
</script>

当然、在执行JS代码之前、还得引入jQuery的库哈、下面给大家贴上Demo的源代码

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1sjI3Ds5 密码: 2ae3