高仿魅族购物车代码效果
代码语言：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">\
<a href="javascript:;" class="check-label check-local-part">\
<i class="checkbox">\
<span class="check-mark"></span>\
</i>\
<em class="check-name">' + i + '</em>\
</a>\
</td>\
</tr>\
</table >\
<table class="goods-body">\
</table>\
</li>');
$(e).each(function (i, e) {
newTr += '<tr>\
<td class="goods-col-select">\
<a href="javascript:;" class="check-label check-product">\
<i class="checkbox">\
<span class="check-mark"></span>\
</i>\
</a>\
<a href="javascript:;" class="goods-img">\
<img src="'+ e.img + '"\
alt="">\
</a>\
<a href="javascript:;" class="goods-info">\
<h4 class="goods-info-title">'+ e.name + '</h4>\
<p class="goods-info-tips">'+ e.goodTip + '</p>\
</a>\
</td>\
<td class="goods-col-price">\
<span>'+ e.singalPrice + '</span>\
</td>\
<td class="goods-col-volumes">\
<div class="num-ctrl-area clearfix">\
<button class="minus">-</button>\
<input type="text" value="1" class="input">\
<button class="plus">+</button>\
<em class="hint">限购10件</em>\
</div>\
</td>\
<td class="goods-col-total">\
<span></span>\
</td>\
<td class="goods-col-ctrl">\
<span>- -</span>\
<i class="del-product">\
<span class="line-left"></span>\
<span class="line-right"></span>\
</i>\
</td>\
</tr>';
});
$newLi.children("table.goods-body").append(newTr);
$newLi.appendTo($("ul.goods-ul"));
});
(function (win, undefined) {
var ShopCart = function () {
this.judge = '';
this.curUnitBtn = null;
this.fixedObj();
this.dynamic1Obj();
this.calcInfo();
this.singalDel();
this.globalDel();
this.orderBtnCss();
this.twoBtn();
this.floatDelBtn();
this.checkBox();
this.inputChange();
this.fixed();
this.init();
};
ShopCart.prototype = {
constructor: ShopCart,
//初始化事件
init: function () {
var shopCart = this;
this.input.each(function (i, e) {
var $thisButton = $(e).parent().find(shopCart.button);
shopCart.buttonCss($thisButton, $(e).val());
});
/*编辑按钮*/
this.editBtn.parent().on("click", function () {
shopCart.editBtn.toggleClass(shopCart.edit);
if (shopCart.editBtn.hasClass(shopCart.edit)) {
shopCart.editBtn.text("编辑");
shopCart.delCtrl.show().siblings().fadeOut(100);
} else {
shopCart.editBtn.text("完成");
shopCart.delCtrl.hide().siblings().fadeIn(100);
};
});
/*弹出框取消按钮*/
this.cancelBtn.on("click",
function () {
shopCart.floatBox.fadeOut(200);
});
/*弹出框关闭按钮*/
this.closeBtn.on("click",
function () {
shopCart.floatBox.fadeOut(200);
});
$(window).on("resize scroll",
function () {
shopCart.fixed();
});
},
//获取固定的元素
fixedObj: function () {
this.mzContainer = $(".mzContainer");
this.cartFoot = this.mzContainer.find("div.shop-cart-footer");
this.checkAll = this.mzContainer.find("a.check-all"); //全选按钮
this.sum = this.mzContainer.find("span.sum"); //总件数
this.sumed = this.mzContainer.find("span.sum-selected"); //已选总件数
this.billPrice = this.mzContainer.find("span.bill-price"); //合计价格
this.orderBtn = this.mzContainer.find("a.order-btn"); //结算按钮
this.editBtn = this.mzContainer.find("td.edit-area>span.edit"); //编辑按钮
this.delSelected = this.mzContainer.find("em.goods-delete"); //删除选中商品按钮
//悬浮提示框区域
this.floatBox = $(".float-box");
this.delBtn = this.floatBox.find("a.delete");
this.cancelBtn = this.floatBox.find("a.cancel");
this.closeBtn = this.floatBox.find("i.close-btn");
this.confirmTitle = this.floatBox.find("h4.confirm-title>span");
this.confirmCon = this.floatBox.find("div.confirm-content");
//class样式
this.checked = 'checked';
this.forbid = 'forbid';
this.fixSite = 'fixed';
this.banOrder = 'banOrder';
this.edit = 'edit';
},
//获取当存在删除添加商品时的.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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