首页 > 代码库 > 商品飞入购物车特效

商品飞入购物车特效

2024-09-11 12:17:10   245人阅读

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>购物车特效</title>
  <script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
  <style type="text/css">
  *{
  margin:0px;
  padding:0px;
  border:0px;
  }
  #container{
  width:1000px;
  height:600px;
  border:1px solid gray;
  position:relative;
  padding:10px;
   
  }
  .shangpin{
  width:230px;
  height:auto;
  border:1px solid aquamarine;
  text-align: center;
  float: left;
  margin:0px 20px 20px 0px;
  }
  .shangpin button{
  background: lightblue;
  cursor:pointer;
  height:20px;
  width:100px;
  }
  .clearflo{
  clear:both;
  }
  #shopingcar{
  width:100px;
  height:50px;
  border:1px solid red;
  position:absolute;
  top:0px;
  right:0px;
  background:gray;
  color:red;
  }
  #shopingcar img{
  width:50px;
  height:50px;
  }
  #shopingcar .num{
  position:absolute;
  top:2px;
  left:15px;
  }
  </style>
  <script type="text/javascript">
  $(function(){
  var carnum=0;
  $(".shangpin button").on("click",function(){
  var shopcar=$("#shopingcar");
   
  var img=$(this).parents(".shangpin").find("img");
  var cloneimg=img.clone();
  cloneimg.css({
  "width":"230px",
  "height":"230px",
  "opacity":"0.5",
  "position":"absolute",
  "top":img.offset().top,
  "left":img.offset().left,
  "z-index":"1111"
  }).appendTo($("body")).animate({
  "width":"50px",
  "height":"50px",
  "top":shopcar.offset().top,
  "left":shopcar.offset().left
  },2000,function(){
  cloneimg.animate({
  "width":"0",
  "height":"0"
  },function(){
  $("#shopingcar .num").html(++carnum)
  $(this).detach()
  })
   
  })
   
   
  })
  })
  </script>
  </head>
  <body>
  <div id="container">
  <div class="shangpin">
  <img src="http://www.mamicode.com/img/1.jpg" id="img" />
  <p class="price"> price:15.55 </p>
  <button>加入购物车</button>
  </div>
  <div class="shangpin">
  <img src="http://www.mamicode.com/img/2.jpg" id="img" />
  <p class="price">price:</p>
  <button>加入购物车</button>
  </div>
  <div class="shangpin">
  <img src="http://www.mamicode.com/img/3.jpg" id="img" />
  <p class="price">price:</p>
  <button>加入购物车</button>
  </div>
  <div class="shangpin">
  <img src="http://www.mamicode.com/img/4.jpg" id="img" />
  <p class="price">price:</p>
  <button>加入购物车</button>
  </div>
  <div class="shangpin">
  <img src="http://www.mamicode.com/img/5.jpg" id="img" />
  <p class="price">price:</p>
  <button>加入购物车</button>
  </div><div class="shangpin">
  <img src="http://www.mamicode.com/img/6.jpg" id="img" />
  <p class="price">price:</p>
  <button>加入购物车</button>
  </div>
  <div class="clearflo"></div>
  <div id="shopingcar">
  <img src="http://www.mamicode.com/img/car.png" />
  <p class="num">0</p>
  </div>
  </div>
  </body>
  </html>
   

技术分享

商品飞入购物车特效


联系
我们