点击加入购物车动画

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="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>