jQuery+HTML5实现的添加到购物车特效源码.zip资源-CSDN文库

共12个文件

jpg：3个

js：3个

svg：3个

版权申诉

jquery

123 浏览量 2022-11-06 23:51:21 上传评论收藏 65KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery+HTML5实现的添加到购物车特效源码.zip （12个子文件）

132686884896372790

css

reset.css 1KB

style.css 15KB

img

cd-icon-cart.svg 791B

cd-icon-settings.svg 1KB

thumb-3.jpg 14KB

thumb-1.jpg 14KB

thumb-2.jpg 15KB

cd-icon-arrow.svg 527B

index.html 9KB

modernizr.js 15KB

main.js 4KB

jquery-2.1.4.js 82KB

<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="gb2312"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery HTML5添加到购物车代码</title> <link href='http://fonts.useso.com/css?family=Work+Sans:400,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/modernizr.js"></script> </head> <body> <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>  <button class="cd-customization-trigger">Customize</button> </div>  <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div>  </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>  <button class="cd-customization-trigger">Customize</button> </div>  <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div>  </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>  <button class="cd-customization-trigger">Customize</button> </div>  <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div>  </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>  <button class="cd-customization-trigger">Customize</button> </div>  <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div>  </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>  <button class="cd-customization-trigger">Customize</button> </div>  <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div>  </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> <di

评论收藏

内容反馈

版权申诉