高仿魅族购物车代码效果
代码语言：html
所属分类：电商
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
var $cartContainer = $('<div class="mzContainer">\
<div class= "check-container" >\
<div class="shop-cart-nav">\
<table>\
<tr>\
<td class="check-area">\
<a href="javascript:;" class="check-label check-all">\
<i class="checkbox">\
<span class="check-mark"></span>\
</i>\
<em class="check-name">全选</em>\
</a>\
</td>\
<td class="singal-price">\
单价(元)\
</td>\
<td class="volumes">\
数量\
</td>\
<td class="small-total">\
小计(元)\
</td>\
<td class="edit-area">\
<span class="edit">编辑</span>\
</td>\
</tr>\
</table>\
</div>\
<ul class="goods-ul">\
</ul>\
</div >\
<div class="shop-cart-footer">\
<div class="cart-foot clearfix">\
<div class="cart-foot-left">\
<a href="javascript:;" class="check-label check-all">\
<i class="checkbox">\
<span class="check-mark"></span>\
</i>\
<em class="check-name">全选</em>\
</a>\
<em class="goods-delete">删除选中的商品</em>\
<em class="goods-num">\
共<span class="sum"></span>件商品，\
已选择 <span class="sum-selected"></span> 件\
</em>\
</div>\
<div class="cart-foot-right">\
<em class="total-bill">\
合计(不含运费)：\
<span class="bill-price"></span>\
</em>\
<a href="javascript:;" class="order-btn ban-order">去结算</a>\
</div>\
</div>\
</div>\
</div >');
$(".header").after($cartContainer);
var datas = {
'声学': [{
'name': 'MEIZU UR 高端定制耳机',
"img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
// "img": 'https://openfile.meizu.com/group1/M00/07/4D/Cgbj0F1l7zeAFyLsAAZJk_cF8Tk126.png@120x120.png',
'goodTip': '预约 十单元 8699起',
'singalPrice': '￥200.00'
}],
'手机': [{
'name': '魅族 16Xs',
"img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
// "img": 'https://openfile.meizu.com/group1/M00/07/2C/Cgbj0FzvRI6AWu1jAAxIbnS8M5Q295.png@120x120.png',
'goodTip': '全网通公开版 珊瑚橙 6+64GB',
'singalPrice': '￥1499.00'
},
{
'name': '魅族 16s',
"img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
// "img": 'https://openfile.meizu.com/group1/M00/07/23/Cgbj0FzaXQqAH-L3AAeSSra0qAg862.png@120x120.png',
'goodTip': '全网通公开版 凝光白 6+128GB',
'singalPrice': '￥2699.00'
},
{
'name': '魅族 16s Pro',
"img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
// "img": 'https://openfile.meizu.com/group1/M00/07/5F/Cgbj0V1jhtuAa71pAAd3EPLUA9Q862.png@120x120.png',
'goodTip': '全网通公开版 黑之秘境 8+128GB',
'singalPrice': '￥2999.00'
},
{
'name': '魅族 16T',
"img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
// "img": 'https://openfile.meizu.com/group1/M00/07/62/Cgbj0F2upwyAKqQSAAlGpvLiEdc809.png@120x120.png',
'goodTip': '全网通公开版 湖光绿 8+256GB',
'singalPrice': '￥2499.00'
}]
};
$.each(datas, function (i, e) {
var newTr = '';
var $newLi = $('<li class="goods-list">\
<table class= "goods-header" >\
<tr>\
<td colspan="5">\
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0