你的位置:首页 > 软件开发 > Java > 基于jQuery HTML5添加到购物车代码

基于jQuery HTML5添加到购物车代码

发布时间:2015-08-29 11:00:16
基于jQuery HTML5添加到购物车代码。这是一款支持选择颜色跟样式的添加购物车代码。效果图如下:在线预览 源码下载实现的代码。html代码:<header> <h1>Quick Add to Cart</h1> ...

基于jQuery HTML5添加到购物车代码

基于jQuery HTML5添加到购物车代码。这是一款支持选择颜色跟样式的添加购物车代码。效果图如下:

基于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='/images/loading.gif' data-original="img/thumb-1.jpg" ></li>            <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></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='/images/loading.gif' data-original="img/thumb-1.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></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='/images/loading.gif' data-original="img/thumb-1.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li>            <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></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='/images/loading.gif' data-original="img/thumb-1.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></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='/images/loading.gif' data-original="img/thumb-1.jpg" ></li>            <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></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='/images/loading.gif' data-original="img/thumb-1.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li>            <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></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='/images/loading.gif' data-original="js/jquery-2.1.4.js"></script>  <script src='/images/loading.gif' data-original="js/main.js"></script> <!-- Resource jQuery -->

原标题:基于jQuery HTML5添加到购物车代码

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。