jQuery浮动的加入购物车特效-可删除和撤消【原创】

查看演示 下载资源 下载积分： 60 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head先要引入CSS样式，代码如下：

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

页面的body部分也是比较简单的，一个商品的容器和购物车的容器，结构很容易能看懂的，代码如下：

<main>
	<h1>jQuery加入购物车效果</h1>
	<a href="#0" class="cd-add-to-cart" data-price="25.99">加入购物车</a>
</main>

<div class="cd-cart-container empty">
	<a href="#0" class="cd-cart-trigger">
		购物车
		<ul class="count">
			<li>0</li>
			<li>0</li>
		</ul>
	</a>

	<div class="cd-cart">
		<div class="wrapper">
			<header>
				<h2>购物车</h2>
				<span class="undo">删除商品 <a href="#0">撤消</a></span>
			</header>
			
			<div class="body">
				<ul>
					<!-- 商品将添加到这里 -->
				</ul>
			</div>

			<footer>
				<a href="#0" class="checkout btn"><em>结算 - ¥<span>0</span></em></a>
			</footer>
		</div>
	</div>
</div>

页面的底部引入jQuery库和javascript插件，代码如下：

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>