jQuery UI商品图片展示及添加购物车结算代码
218
0
jQuery UI购物车购物车代码添加购物车

一款不错的jQuery UI商品图片展示及添加购物车结算代码,点击购物车小图标可以展开查看已添加购物车的商品。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var index = 0;
var o = 0;
var i = 1;
// var money = $('.p')
// 预览图片往右
$('.next').click(function () {
$('#shop ul').css({transform:'translateX(-300px)'});
})
// 预览图片往左
$('.pre').click(function () {
$('#shop ul').css({transform:'translateX(0px)'});
})
//加数量
$('.add').click(function () {
index++;
$('#number').val(index);
$('.prices').css({opacity:'1'});
operation();
})
//减数量
$('.reduce').click(function () {
index--;
if (index<0) {
return index=0;
}
$('#number').val(index);
operation();
})
//点击输入框时显示支付价格
$('#number').click(function () {
$('.prices').css({opacity:'1'});
})
//直接修改商品数量,失去焦点后计算总价
$('#number').blur( function () {
var num = parseInt($(this).val())*18.88
console.log(num)
$('.prices').text(num.toFixed(2));
})
//打开支付框
$('.buy').click(function () {
$('main').css({opacity:'0.5'});
$('#pay').css({zIndex:'1'});
$('.pays').text('You need to '+ $('.prices').text() + ' RMB')
})
//关闭支付框
$('.close').click(function () {
$('main').css({opacity:'1'});
$('#pay').css({zIndex:'-1'});
})
//打开购物车
$('#open').click(function () {
o++;
if (o%2==0) {
$('main').css({width:'400px'});
$('#cart').css({width:'0px',transform:'translateX(500px)'});
}else{
$('main').css({width:'900px'});
$('#cart').css({width:'500px',transform:'translateX(0px)'});
}
})
//点击Add Carts 就往购物车添加商品
$('.join').click(function () {
$('.num').css({opacity:'1'})
$('.num').text('+'+ i);
$('#cart .cart-'+i).css({display:'block'});
i++;
})
//关闭添加的商品部份
$('#cart .fa').click(function () {
i--;
$('#cart .cart-'+i).css({display:'none'});
})
//添加商品出现+1
$('.join').mouseleave(function () {
$('.num').css({opacity:'0'})
})
function operation() {//计算总价的方法
var num = index * 18.88;
$('.prices').text(num.toFixed(2));
}
function close() {
}
// number();
</script>热点素材
- 2,0351
- 2,00312
- 1,9800
- 1,8553
- 1,7841





