首页 > 代码库 > 点击加入购物车动画

点击加入购物车动画

技术分享

HTML

 

<div class="fly-cart">
  <div class="wrapper">
     <span><i class="shopping-cart"></i></span>
     <div class="clear"></div>
     <div class="items">
        <div class="item fly-item1">
           <div class="item-img">
              <img src="http://www.mamicode.com/images/item2.jpg" alt="item" />
           </div>
           <h3>Unique Color Wedges </h3>
           <h6>Nemo enim ipsam voluptatem quia voluptassit aspernatur aut odit aut fugit, sed quia.</h6>
           <p>Price : <span>$29</span></p>
           <button class="add-to-cart" type="button">加入购物车</button>
           <div class="clear"></div>
        </div>
        <div class="clear"></div>
     </div>
  </div>
</div>

javascript
<script>
   $(‘.add-to-cart‘).on(‘click‘, function () {
       var cart = $(‘.shopping-cart‘);
       var imgtodrag = $(this).parent(‘.item‘).find("img").eq(0);
       if (imgtodrag) {
           var imgclone = imgtodrag.clone()
               .offset({//.offset()方法获取匹配元素在当前视口的相对偏移
               top: imgtodrag.offset().top,
               left: imgtodrag.offset().left
           })//克隆后图片的top等于之前的offset().top;left等于之前的offset().left;说明克隆后图片位置和原图片位置相同
               .css({
               ‘opacity‘: ‘0.5‘,
                   ‘position‘: ‘absolute‘,
                   ‘height‘: ‘150px‘,
                   ‘width‘: ‘150px‘,
                   ‘z-index‘: ‘100‘
           })
               .appendTo($(‘body‘))
               .animate({
               ‘top‘: cart.offset().top + 10,
                   ‘left‘: cart.offset().left + 10,//位置过渡到购物车旁边
                   ‘width‘: 75,//此时大小也随之变小
                   ‘height‘: 75
           }, 1000, ‘easeInOutExpo‘);
           
           imgclone.animate({
               ‘width‘: 0,
                   ‘height‘: 0
           }, function () {
               $(this).detach()//detach() 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
           });
       }
   });
</script>

 

点击加入购物车动画