基于jQuery HTML5添加到购物车代码
阅读：101
时间：2018-02-03 03:17
基于jQuery HTML5添加到购物车代码。这是一款支持选择颜色跟样式的添加购物车代码。效果图如下：
实现的代码。
html代码：
<header>
<h1>Quick Add to Cart</h1>
</header>
<a href="#0" class="cd-cart">
<span>0</span>
</a>
<ul class="cd-gallery">
<li>
<div class="cd-single-item">
<a href="#0">
<ul class="cd-slider-wrapper">
<li><img src="img/thumb-1.jpg" alt="Preview image"></li>
<li class="selected"><img src="img/thumb-2.jpg" alt="Preview image"></li>
<li><img src="img/thumb-3.jpg" alt="Preview image"></li>
</ul>
</a>
<div class="cd-customization">
<div class="color selected-2" data-type="select">
<ul>
<li class="color-1">color-1</li>
<li class="color-2 active">color-2</li>
<li class="color-3">color-3</li>
</ul>
</div>
<div class="size" data-type="select">
<ul>
<li class="small active">Small</li>
<li class="medium">Medium</li>
<li class="large">Large</li>
</ul>
</div>
<button class="add-to-cart">
<em>Add to Cart</em>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />
</svg>
</button>
</div> <!-- .cd-customization -->
<button class="cd-customization-trigger">Customize</button>
</div> <!-- .cd-single-item -->
<div class="cd-item-info">
<b><a href="#0">Product Name</a></b>
<em>$9.99</em>
</div> <!-- cd-item-info -->
</li>
<li>
<div class="cd-single-item">
<a href="#0">
<ul class="cd-slider-wrapper">
<li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li>
<li><img src="img/thumb-2.jpg" alt="Preview image"></li>
<li><img src="img/thumb-3.jpg" alt="Preview image"></li>
</ul>
</a>
<div class="cd-customization">
<div class="color" data-type="select">
<ul>
<li class="color-1 active">color-1</li>
<li class="color-2">color-2</li>
<li class="color-3">color-3</li>
</ul>
</div>
<div class="size" data-type="select">
<ul>
<li class="small active">Small</li>
<li class="medium">Medium</li>
<li class="large">Large</li>
</ul>
</div>
<button class="add-to-cart">
<em>Add to Cart</em>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />
</svg>
</button>
</div> <!-- .cd-customization -->
<button class="cd-customization-trigger">Customize</button>
</div> <!-- .cd-single-item -->
<div class="cd-item-info">
<b><a href="#0">Product Name</a></b>
<em>$9.99</em>
</div> <!-- cd-item-info -->
</li>
<li>
<div class="cd-single-item">
<a href="#0">
<ul class="cd-slider-wrapper">
<li><img src="img/thumb-1.jpg" alt="Preview image"></li>
<li><img src="img/thumb-2.jpg" alt="Preview image"></li>
<li class="selected"><img src="img/thumb-3.jpg" alt="Preview image"></li>
</ul>
</a>
<div class="cd-customization">
<div class="color selected-3" data-type="select">
<ul>
<li class="color-1">color-1</li>
<li class="color-2">color-2</li>
<li class="color-3 active">color-3</li>
</ul>
</div>
<div class="size" data-type="select">
<ul>
<li class="small active">Small</li>
<li class="medium">Medium</li>
<li class="large">Large</li>
</ul>
</div>
<button class="add-to-cart">
<em>Add to Cart</em>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />
</svg>
</button>
</div> <!-- .cd-customization -->
<button class="cd-customization-trigger">Customize</button>
</div> <!-- .cd-single-item -->
<div class="cd-item-info">
<b><a href="#0">Product Name</a></b>
<em>$9.99</em>
</div> <!-- cd-item-info -->
</li>
<li>
<div class="cd-single-item">
<a href="#0">
<ul class="cd-slider-wrapper">
<li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li>
<li><img src="img/thumb-2.jpg" alt="Preview image"></li>
<li><img src="img/thumb-3.jpg" alt="Preview image"></li>
</ul>
</a>
<div class="cd-customization">
<div class="color" data-type="select">
<ul>
<li class="color-1 active">color-1</li>
<li class="color-2">color-2</li>
<li class="color-3">color-3</li>
</ul>
</div>
<div class="size" data-type="select">
<ul>
<li class="small active">Small</li>
<li class="medium">Medium</li>
<li class="large">Large</li>
</ul>
</div>
<button class="add-to-cart">
<em>Add to Cart</em>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />
</svg>
</button>
</div> <!-- .cd-customization -->
<button class="cd-customization-trigger">Customize</button>
</div> <!-- .cd-single-item -->
<div class="cd-item-info">
<b><a href="#0">Product Name</a></b>
<em>$9.99</em>
</div> <!-- cd-item-info -->
</li>
<li>
<div class="cd-single-item">
<a href="#0">
<ul class="cd-slider-wrapper">
<li><img src="img/thumb-1.jpg" alt="Preview image"></li>
<li class="selected"><img src="img/thumb-2.jpg" alt="Preview image"></li>
<li><img src="img/thumb-3.jpg" alt="Preview image"></li>
</ul>
</a>
<div class="cd-customization">
<div class="color selected-2" data-type="select">
<ul>
<li class="color-1">color-1</li>
<li class="color-2 active">color-2</li>
<li class="color-3">color-3</li>
</ul>
</div>
<div class="size" data-type="select">
<ul>
<li class="small active">Small</li>
<li class="medium">Medium</li>
<li class="large">Large</li>
</ul>
</div>
<button class="add-to-cart">
<em>Add to Cart</em>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />
</svg>
</button>
</div> <!-- .cd-customization -->
<button class="cd-customization-trigger">Customize</button>
</div> <!-- .cd-single-item -->
<div class="cd-item-info">
<b><a href="#0">Product Name</a></b>
<em>$9.99</em>
</div> <!-- cd-item-info -->
</li>
<li>
<div class="cd-single-item">
<a href="#0">
<ul class="cd-slider-wrapper">
<li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li>
<li><img src="img/thumb-2.jpg" alt="Preview image"></li>
<li><img src="img/thumb-3.jpg" alt="Preview image"></li>
</ul>
</a>
<div class="cd-customization">
<div class="color" data-type="select">
<ul>
<li class="color-1 active">color-1</li>
<li class="color-2">color-2</li>
<li class="color-3">color-3</li>
</ul>
</div>
<div class="size" data-type="select">
<ul>
<li class="small active">Small</li>
<li class="medium">Medium</li>
<li class="large">Large</li>
</ul>
</div>
<button class="add-to-cart">
<em>Add to Cart</em>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />
</svg>
</button>
</div> <!-- .cd-customization -->
<button class="cd-customization-trigger">Customize</button>
</div> <!-- .cd-single-item -->
<div class="cd-item-info">
<b><a href="#0">Product Name</a></b>
<em>$9.99</em>
</div> <!-- cd-item-info -->
</li>
</ul> <!-- cd-gallery -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
via：http://www.w2bc.com/article/59196
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3