注册 登录 充值会员 退出
毕业设计 PHP源码
充值

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

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-10-07
jQuery UI商品图片展示及添加购物车结算代码
一款不错的jQuery UI商品图片展示及添加购物车结算代码,点击购物车小图标可以展开查看已添加购物车的商品。


js代码

<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>