基于jQuery+HTML5加入购物车代码
基于jQuery+HTML5加入购物车代码。这是一款基于jquery+html5实现的支持累加计价的网站购物车代码。效果图如下:

实现的代码。
html代码:
<div class="ct-pageWrapper">
<main>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="widget">
<h2 class="widget-header">购物车</h2>
<div class="ct-cart"></div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="data:images/product-01.jpg" alt=""></div>
<div class="inner">
<a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">Box of macaroons</h2>
<p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$19.99</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="data:images/product-02.jpg" alt=""></div>
<div class="inner">
<a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">Cherry Straws</h2>
<p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$34.99</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="data:images/product-03.jpg" alt=""></div>
<div class="inner">
<a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">Coffee Macaroons</h2>
<p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$59.99</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="data:images/product-04.jpg" alt=""></div>
<div class="inner">
<a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">Finetti ones</h2>
<p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$9.99</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="data:images/product-05.jpg" alt=""></div>
<div class="inner">
<a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">Minty duo</h2>
<p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$3.99</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="data:images/product-06.jpg" alt=""></div>
<div class="inner">
<a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">Pistachio</h2>
<p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$13.99</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main> <script src="js/jquery-1.11.3.min.js"></script>
<script src="js/shop.min.js"></script>
<script>
$('body').ctshop({
currency: '$',
paypal: {
currency_code: 'EUR'
}
});
</script>
</div>
via:http://www.w2bc.com/article/50566
基于jQuery+HTML5加入购物车代码的更多相关文章
- 基于jQuery HTML5人物介绍卡片特效
基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- 基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <table width= ...
- 基于jQuery实现滚动新闻代码下载
分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div c ...
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
- 基于jQuery页面窗口拖动预览效果
今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- jQuery+html5实现的3D动态切换焦点轮播幻灯片
今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...
- 基于jquery右侧悬浮加入购物车代码
分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览 源码下载 实现的代码: <!--左侧产品parabola.js控制 ...
随机推荐
- AM335x启动
参考文件: 1.TI.Reference_Manual_1.pdf http://pan.baidu.com/s/1c1BJNtm 2.TI_AM335X.pdf http://pan.baidu.c ...
- 模拟ajax接口返回的数据
{ "status": 0, "hasError": false, "success": true, "errno": ...
- 2331: [SCOI2011]地板 插头DP
国际惯例的题面:十分显然的插头DP.由于R*C<=100,所以min(R,C)<=10,然后就可以愉悦地状压啦.我们用三进制状压,0表示没有插头,1表示有一个必须延伸至少一格且拐弯的插头, ...
- 洛谷.2596.[ZJOI2006]书架(Splay)
题目链接 /* 五个操作: 1.将某元素置顶.删掉这个数,插入最左 2.将某元素置底.同样 3.旋到根后,直接将这个数与前驱/后继交换所有信息 不是左右子节点! 4.5.裸平衡树 ps:1.用pos[ ...
- SPOJ.Visible Lattice Points(莫比乌斯反演)
题目链接 /* http://www.spoj.com/problems/VLATTICE/ 题意:求一个n*n*n的晶体,有多少点可以在(0,0,0)处可以直接看到. 同BZOJ.2301 题目即要 ...
- Flask启动原理,源码流程分析
1.执行Flask的实例对象.run()方法 from flask import Flask,request,session app = Flask(__name__) app.secret_key ...
- PHP抓取网页内容经验总结
用php 抓取页面的内容在实际的开发当中是非常有用的,如作一个简单的内容采集器,提取网页中的部分内容等等,抓取到的内容在通过正则表达式做一下过滤就得到了你想要的内容,至于如何用正则表达式过滤,在这里就 ...
- python-memcached包使用方法
本文转载自:http://my.oschina.net/flynewton/blog/10660 将memcached.pyc拷贝到工作目录 #!/usr/bin/env python import ...
- 查询返回JSON数据结果集
查询返回JSON数据结果集 设计目标: 1)一次性可以返回N个数据表的JSON数据 2)跨数据库引擎 { "tables": [ { "cols": [ { & ...
- 详解Paint的setColorFilter(ColorFilter filter)
一.简介 setColorFilter(ColorFilter filter) 设置颜色过滤,这个方法需要我们传入一个ColorFilter参数同样也会返回一个ColorFilter实例.我们在set ...