jquery仿天猫商城点击加入购物车按钮商品动画飞到购物车里面效果



304 1212 405



特效描述:点击加入 购物车按钮 商品飞到购物车,JQuery商品条件过滤选择

代码结构

1. 引入CSS

<link href="css/select.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery-shopping.js"></script>

3. HTML代码

<div id="M-main-b">
	<div class="M-main-list">
		<div class="M-main-A left">
			<div class="M-main-A-a">
				<a href="http://www.dijiuzhanzhang.com/"><img src="images/pro1.jpg" width="65" height="65" alt="asd" /></a>
				<span class="M-list-color-1"></span>
			</div>
			<div class="M-main-A-b">
				<h3><a href="http://www.dijiuzhanzhang.com/">彩涂板卷(镀铝锌基板)</a><em class="baseBg ico1"></em></h3>
				<p>chinacoder 白色 聚酯 2/1 50/50</p>
				<p>宝钢股份</p>
			</div>
		</div>
		<div class="M-main-B left">
			<p class="num">0.6*1000*C</p>
			<p><span>5.000</span>吨</p>
		</div>
		<div class="M-main-C left">
			<p>类似资源共189吨</p>
			<p><a href="#" title="立刻过滤">立刻过滤</a></p>
		</div>
		<div class="M-main-D left">
			<em class="baseBg YI-img"></em>
			<p>&yen;<del>8700.00</del>元/吨</p>
			<p>&yen;<span>6200</span>元/吨</p>
		</div>
		<div class="M-main-E left">
			<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-1">加入购物车</a>
			<p><span class="attention-btn">关注此类资源</span></p>
		</div>
	</div>
	<div class="M-main-list">
		<div class="M-main-A left">
			<div class="M-main-A-a">
				<a href="http://www.dijiuzhanzhang.com/"><img src="images/pro1.jpg" width="65" height="65" alt="asd" /></a>
				<span class="M-list-color-1"></span>
			</div>
			<div class="M-main-A-b">
				<h3><a href="http://www.dijiuzhanzhang.com/">彩涂板卷(镀铝锌基板)</a><em class="baseBg ico1"></em></h3>
				<p>chinacoder 白色 聚酯 2/1 50/50</p>
				<p>宝钢股份</p>
			</div>
		</div>
		<div class="M-main-B left">
			<p class="num">0.6*1000*C</p>
			<p><span>5.000</span>吨</p>
		</div>
		<div class="M-main-C left">
			<p>类似资源共189吨</p>
			<p><a href="#" title="立刻过滤">立刻过滤</a></p>
		</div>
		<div class="M-main-D left">
			<em class="baseBg YI-img"></em>
			<p>&yen;<del>8700.00</del>元/吨</p>
			<p>&yen;<span>6200</span>元/吨</p>
		</div>
		<div class="M-main-E left">
			<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-2">加入购物车</a>
			<p><span class="attention-btn">关注此类资源</span></p>
		</div>
	</div>
	<div class="M-main-list">
		<div class="M-main-A left">
			<div class="M-main-A-a">
				<a href="http://www.dijiuzhanzhang.com/"><img src="images/pro1.jpg" width="65" height="65" alt="asd" /></a>
				<span class="M-list-color-1"></span>
			</div>
			<div class="M-main-A-b">
				<h3><a href="http://www.dijiuzhanzhang.com/">彩涂板卷(镀铝锌基板)</a><em class="baseBg ico1"></em></h3>
				<p>chinacoder 白色 聚酯 2/1 50/50</p>
				<p>宝钢股份</p>
			</div>
		</div>
		<div class="M-main-B left">
			<p class="num">0.6*1000*C</p>
			<p><span>5.000</span>吨</p>
		</div>
		<div class="M-main-C left">
			<p>类似资源共189吨</p>
			<p><a href="#" title="立刻过滤">立刻过滤</a></p>
		</div>
		<div class="M-main-D left">
			<em class="baseBg YI-img"></em>
			<p>&yen;<del>8700.00</del>元/吨</p>
			<p>&yen;<span>6200</span>元/吨</p>
		</div>
		<div class="M-main-E left">
			<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-3">加入购物车</a>
			<p><span class="attention-btn">关注此类资源</span></p>
		</div>
	</div>
	<div class="M-main-list">
		<div class="M-main-A left">
			<div class="M-main-A-a">
				<a href="http://www.dijiuzhanzhang.com/"><img src="images/pro1.jpg" width="65" height="65" alt="asd" /></a>
				<span class="M-list-color-1"></span>
			</div>
			<div class="M-main-A-b">
				<h3><a href="http://www.dijiuzhanzhang.com/">彩涂板卷(镀铝锌基板)</a><em class="baseBg ico1"></em></h3>
				<p>chinacoder 白色 聚酯 2/1 50/50</p>
				<p>宝钢股份</p>
			</div>
		</div>
		<div class="M-main-B left">
			<p class="num">0.6*1000*C</p>
			<p><span>5.000</span>吨</p>
		</div>
		<div class="M-main-C left">
			<p>类似资源共189吨</p>
			<p><a href="#" title="立刻过滤">立刻过滤</a></p>
		</div>
		<div class="M-main-D left">
			<em class="baseBg YI-img"></em>
			<p>&yen;<del>8700.00</del>元/吨</p>
			<p>&yen;<span>6200</span>元/吨</p>
		</div>
		<div class="M-main-E left">
			<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-4">加入购物车</a>
			<p><span class="attention-btn">关注此类资源</span></p>
		</div>
	</div>
	<div class="M-main-list">
		<div class="M-main-A left">
			<div class="M-main-A-a">
				<a href="http://www.dijiuzhanzhang.com/"><img src="images/pro1.jpg" width="65" height="65" alt="asd" /></a>
				<span class="M-list-color-1"></span>
			</div>
			<div class="M-main-A-b">
				<h3><a href="http://www.dijiuzhanzhang.com/">彩涂板卷(镀铝锌基板)</a><em class="baseBg ico1"></em></h3>
				<p>chinacoder 白色 聚酯 2/1 50/50</p>
				<p>宝钢股份</p>
			</div>
		</div>
		<div class="M-main-B left">
			<p class="num">0.6*1000*C</p>
			<p><span>5.000</span>吨</p>
		</div>
		<div class="M-main-C left">
			<p>类似资源共189吨</p>
			<p><a href="#" title="立刻过滤">立刻过滤</a></p>
		</div>
		<div class="M-main-D left">
			<em class="baseBg YI-img"></em>
			<p>&yen;<del>8700.00</del>元/吨</p>
			<p>&yen;<span>6200</span>元/吨</p>
		</div>
		<div class="M-main-E left">
			<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-5">加入购物车</a>
			<p><span class="attention-btn">关注此类资源</span></p>
		</div>
	</div>
	<div class="M-main-list">
		<div class="M-main-A left">
			<div class="M-main-A-a">
				<a href="http://www.dijiuzhanzhang.com/"><img src="images/pro1.jpg" width="65" height="65" alt="asd" /></a>
				<span class="M-list-color-1"></span>
			</div>
			<div class="M-main-A-b">
				<h3><a href="http://www.dijiuzhanzhang.com/">彩涂板卷(镀铝锌基板)</a><em class="baseBg ico1"></em></h3>
				<p>chinacoder 白色 聚酯 2/1 50/50</p>
				<p>宝钢股份</p>
			</div>
		</div>
		<div class="M-main-B left">
			<p class="num">0.6*1000*C</p>
			<p><span>5.000</span>吨</p>
		</div>
		<div class="M-main-C left">
			<p>类似资源共189吨</p>
			<p><a href="#" title="立刻过滤">立刻过滤</a></p>
		</div>
		<div class="M-main-D left">
			<em class="baseBg YI-img"></em>
			<p>&yen;<del>8700.00</del>元/吨</p>
			<p>&yen;<span>6200</span>元/吨</p>
		</div>
		<div class="M-main-E left">
			<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-6">加入购物车</a>
			<p><span class="attention-btn">关注此类资源</span></p>
		</div>
	</div>
</div>
<!--J-shoping-->
<div class="J-shoping J-shoping-small">
	<div class="J-shoping-item">
		<a href="http://www.dijiuzhanzhang.com/" title="" id="U-attion"><em class="baseBg"></em>我关注的资源<span class="baseBg"></span></a>
		<div class="baseBg J-L-ico J-shoping-pos"></div>
		<div class="J-shoping-main">
			<div class="J-shoping-title">
				<a href="#" title="" class="J-go"><em class="baseBg"></em>购物车</a>
				<span class="baseBg J-shoping-num">0</span>
			</div>
			<div class="baseBg J-shoping-mx"></div>
			<div class="J-shoping-px"></div>
			<div class="J-shoping-body">
				<div class="J-shoping-buy">
					<span>最多显示最新<strong>5</strong>条</span>
					<a class="baseBg" href="http://www.dijiuzhanzhang.com/" title="去购物车结算"></a>
				</div>
			</div>
		</div>
		<div class="baseBg J-R-ico J-shoping-pos"></div>
	</div>
</div>
<a href="http://www.dijiuzhanzhang.com/" title="在线客服" class="baseBg Q-online"></a>
<script type="text/javascript" >
$(function(){
   $('.Q-buy-btn').shoping(); //调用shoping函数
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到