jQuery UI.zip

  • 小兰懒
    了解作者
  • Java
    开发工具
  • 36KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 10 积分
    下载积分
  • 2
    下载次数
  • 2018-12-05 14:27
    上传日期
html+jquer商品图片展示及添加购物车结算代码
jQuery UI.zip
  • js
  • jquery.min.js
    90.9KB
  • css
  • shop.css
    7.8KB
  • index.html
    6.9KB
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery UI商品图片展示及添加购物车结算代码</title> <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/shop.css"> </head> <body> <main> <div id="menu"> <ul> <li class="menu"> <section> <i class="fa fa-search" style=" color: white;"></i> <a href="" rel='nofollow' onclick='return false;'>搜索</a> </section> </li> <li class="menu"> <section> <i class="fa fa-home"></i> <a href="" rel='nofollow' onclick='return false;'>店铺</a> </section> </li> <li class="menu"> <section> <i class="fa fa-clock-o"></i> <a href="" rel='nofollow' onclick='return false;'>倒计时</a> </section> </li> <li class="menu"> <section> <i class="fa fa-qrcode"></i> <a href="" rel='nofollow' onclick='return false;'>微信号</a> </section> </li> <li class="menu"> <section> <i class="fa fa-camera"></i> <a href="" rel='nofollow' onclick='return false;'>实物照</a> </section> </li> <li class="menu"> <section> <i class="fa fa-group"></i> <a href="" rel='nofollow' onclick='return false;'>买家秀</a> </section> </li> <li class="menu"> <section> <i class="fa fa-truck"></i> <a href="" rel='nofollow' onclick='return false;'>物流</a> </section> </li> <li class="menu"> <section> <i class="fa fa-share-alt"></i> <a href="" rel='nofollow' onclick='return false;'>分享</a> </section> </li> <li class="menu"> <section> <i class="fa fa-comment-o" style=" color: rgb(236, 224, 45);"></i> <a href="" rel='nofollow' onclick='return false;'>联系客服</a> </section> </li> <li class="menu" style="border-bottom: 1px solid rgba(56, 56, 56, 0.808);"> <section> <i class="fa fa-thumbs-o-up" style=" color:red;"></i> <a href="" rel='nofollow' onclick='return false;'>好评</a> </section> </li> </ul> </div> <div id="commodity"> <div class="img"> <h1>Commodity</h1> <!-- 详细介绍部分 --> <section class="introduce"> <p>Very nice!!</p> </section> </div> <div id="shop"> <section class="pre"> <i class="fa fa-chevron-left"></i> </section> <section class="next"> <i class="fa fa-chevron-right"></i> </section> <ul> <li class="shop-img">img</li> <li class="shop-img">img</li> <li class="shop-img">img</li> <li class="shop-img">img</li> <li class="shop-img">img</li> <li class="shop-img">img</li> <li class="shop-img">img</li> <li class="shop-img">img</li> <li class="shop-img">img</li> <li class="shop-img">img</li> </ul> </div> <!-- <i class="fa fa-gift">购物车</i> --> <!-- --> <div class="shop-b"> <div id="price">18.88</div> <div id="add"> <section class="add"><i class="fa fa-plus"></i></section> <input type="text" id="number" value="0" autocomplete="off"> <section class="reduce"><i class="fa fa-minus"></i></section> </div> <div class="shop-bs"> <section class="join" unselectable="on" onselectstart="return false;">Add Cart</section> <section class="buy">Buy</section> </div> <div class="cart"> <section class="num"></section> <i class="fa fa-shopping-cart fa-flip-horizontal" id="open"></i></div> <div class="prices">0.00</div> </div> </div> <div id="cart"> <section class="cart-1"> <i class="fa fa-remove" ></i></section> <section class="cart-2"><i class="fa fa-remove" ></i></section> <section class="cart-3"><i class="fa fa-remove" ></i></section> <section class="cart-4"><i class="fa fa-remove" ></i></section> <section class="cart-5"><i class="fa fa-remove" ></i></section> <section class="cart-6"><i class="fa fa-remove" ></i></section> <section class="cart-7"><i class="fa fa-remove" ></i></section> <section class="cart-8"><i class="fa fa-remove" ></i></section> <section class="cart-9"><i class="fa fa-remove" ></i></section> <section class="cart-10"><i class="fa fa-remove" ></i></section> <section class="cart-11"><i class="fa fa-remove" ></i></section> </div> </main> <div id="pay"> <section class="pay"> <section class="pays"></section> <section class="close">No</section> <section class="confirm">Yes</section> </section> </div> <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> </body> </html>
评论
    相关推荐
    • jQuery API
      本次的资源是jQuery,包括jQuery英文版的1.2和中文版的1.4,对比起来使用很方便的,希望可以帮助大家学习!呵呵
    • jquery插件
      jquery插件或者jquery框架文件:jquery-1.7.2,jquery-1.8.3,jquery-1.9.1,jquery-1.10.1,jquery-2.0.0,jquery-2.0.2,jquery-2.0.3全部都有
    • jquery 实例
      jquery 静态页面显示数据 。 在做开发时 jquery 是一门必不可少的技术、不仅要学会用、还要知道怎么巧妙地用
    • jquery学习
      该资源包含了一些jquery初学者所遇到的基本问题。以及一些附带源码的jquery实例,对初学jquery的人来说是一个很好的指导
    • jquery 下载
      jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载jquery 下载
    • Jquery 1.11.2
      Jquery官网下载的Jquery 1.11.2文件,包括jquery-1.11.2.min.js、jquery-1.11.2.min.map和jquery-1.11.2.js,供有需要但网速太慢的童鞋下载
    • jqueryDemo
      初学jquery的非常不错的demo (描述重点就可以了啊。还要有字数的限制。。 初学jquery的非常不错的demo 初学jquery的非常不错的demo 初学jquery的非常不错的demo )
    • Jquery api
      Cloudream | Ross Wan | 为之漫笔 | Shawphy | jQuery 1.3 API 离线版下载 ... jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,...
    • jquery
      本文件夹下的两个js文件是目前的最新版本的jQuery1.1.2, 其中jquery-latest.js为源文件,大小约为58k,供大家学习使用, jquery-latest-pack.js为压缩后的文件只有大约20k,在实际项目中使用。 <br>jquery...
    • JQuery
      jQuery查询