jQuery仿淘宝加入购物车动画效果源代码下载
2014-12-24 13:30:20  By: dwtedx

和大家分享一个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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

DD记账
top
+