jQuery商品飛入購物車效果

antzone發表於2017-04-18
jQuery

分享一段程式碼例項，它簡單實現了飛入購物車效果的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
ul li {
  list-style: none;
  padding: 10px;
  overflow: hidden;
}
.left_a {
  display: block;
  width: 100px;
  height: 100px;
  text-align: center;
  background: #ccc;
  font-size: 26px;
  float: left;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  margin-right: 18px;
}
.right_div {
  position: relative;
}
.right_div h2 {
  font-size: 16px;
  color: #666;
}
.right_div p {
  font-size: 14px;
  color: #666;
  padding-top: 8px;
}
.add_cart {
  display: block;
  position: absolute;
  top: 74%;
  right: 2%;
  border: 1px solid red;
  padding: 4px 8px;
  text-align: center;
  font-size: 16px;
  text-decoration: none;
  background: rgba(0, 180, 0, 0.5);
  color: #fff;
}
.cart_shop {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #d2d2d2;
  box-shadow: 0 0 2px #d2d2d2;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 50px;
  right: 3%;
}
.cart_shop a {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  border-radius: 50%;
  color: white;
  font-size: 12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $(".add_cart").click(function () {
    $(".cart_shop a").text(parseInt($(".cart_shop a").text()) + 1);
    var shopOffset = $(".cart_shop").offset();
    var leftaOffset = $(this).parent().siblings('.left_a').offset();
    var cloneDiv = $(this).parent().siblings('.left_a').clone();
    cloneDiv.css({
      "position": "absolute",
      "left": leftaOffset.left,
      "top": leftaOffset.top,
    });
    $(this).parent().siblings('.left_a').parent().append(cloneDiv);
    cloneDiv.stop().animate({
      width: 0,
      height: 0,
      left: shopOffset.left,
      top: shopOffset.top,
      opacity: 1
    }, 'slow');
  });
})
</script>
</head>
<body>
  <ul>
    <li>
      <a href="#" class="left_a"></a>
      <div class="right_div">
        <a href="#" class="add_cart">新增</a>
      </div>
    </li>
    <li>
      <a href="#" class="left_a" style="color:green;"></a>
      <div class="right_div">
        <a href="#" class="add_cart">新增</a>
      </div>
    </li>
  </ul>
  <div class="cart_shop">
    <a href="">0</a>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼比較簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.parseInt()參閱javascript parseInt()一章節。

（2）.offset()參閱jQuery offset()方法一章節。

（3）.parent()參閱jQuery parent()方法一章節。

（4）.siblings()參閱jQuery siblings()方法一章節。

相關文章