jQuery原创添加购物车特效代码

jQuery原创添加购物车特效代码

css样式+jquery实现商品添加购物车样式,点击购物车图标可以打开购物栏。随时进行商品添加和删除,同时计算购买物品价格,有一部分功能没有完善,需要的自己下载后在进行修改。

使用方法
引入相关CSS样式文件

1
<link rel="stylesheet" href="css/shop.css">

javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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() {
   
}
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论