一款不错的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>
暂无评论内容