jQuery仿天猫商品飞入购物车代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿天猫商品飞入购物车代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿天猫商品飞入购物车代码</title>
<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>

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<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>

</head>
<body>

<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 class="thingsBox"><img src="images/3.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/4.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/5.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/6.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/7.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/8.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/9.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/10.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/11.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/12.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/13.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/14.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/15.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/16.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/17.jpg" onClick="MoveBox(this)"/></div>
	<div class="thingsBox"><img src="images/1.jpg" onClick="MoveBox(this)"/></div>
</div>
<div class="shopping_cart"><img id="collectBox" src="images/cart.gif"/></div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)