当前位置: 网站首页 > 网页特效 > jquery特效 >
当前位置: 网站首页 > 网页特效 > jquery特效 > jQuery UI添加购物车结算代码

jQuery UI添加购物车结算代码

  • 源码类型:国产源码 源码授权:免费源码
  • 源码语言:简体中文源码大小:35 KB
  • 文件类型:.rar下载次数:
  • 源码等级:
    发布时间:2018-10-11
  • 官方网址: 暂无官网 演示网址: Demo Url
  • 运行环境:jQuery 浏览次数:
  • 下载等级:无等级限制 所需金币:0 金币
  • 好评
    (0)
    0%
    差评
    (0)
    0%
    jQuery UI添加购物车结算代码
    软件介绍

    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>
    下载地址
    下载说明

    推荐使用第三方专业下载工具下载本站软件,使用 WinRAR v3.10 以上版本解压本站软件。
    80站长网所有软件,源码,均来自网友上传,或者网络收集,如果有侵犯版权请及时联系我们,我们会第一时间处理。
    如果这个软件总是不能下载的请点击报告错误,谢谢合作!!
    下载本站资源,如果服务器暂不能下载请过一段时间重试!
    本站提供的一些商业软件是供学习研究之用,如用于商业用途,请购买正版。

    推荐jquery特效