购物车效果

w待学习、实践、优化

 1 <script type="text/javascript">
 2     <!--
 3     /*
 4      Add to cart fly effect with jQuery. - May 05, 2013
 5      (c) 2013 @ElmahdiMahmoud - fikra-masri.by
 6      license: http://www.opensource.org/licenses/mit-license.php
 7      */
 8 
 9     var wcart_count_value =0
10     $('.add-to-cart').on('click', function () {
11         wcart_count_value++
12         var cart = $('.shopping-cart');
13         //   var imgtodrag = $(this).parent('.item').find("img").eq(0);
14         //   var imgtodrag = $(this).parent('.item').find("img").eq(0);
15         // var imgtodrag = $('#wfindimg').find("img").eq(0);
16         //   var imgtodrag = $('#wimg')
17         var imgtodrag = $('body').find("img").eq(0);
18 
19 
20         //console.log($('#wfindimg').find("img"))
21         console.log(imgtodrag)
22 
23         //   var imgtodrag = $(this).parent('.item').find("img").eq(0);
24 
25         if (imgtodrag) {
26             var imgclone = imgtodrag.clone()
27                 .offset({
28                     top: imgtodrag.offset().top,
29                     left: imgtodrag.offset().left
30                 })
31                 .css({
32                     // 'opacity': '0.5',
33                     'opacity': '1',
34 
35                     'position': 'absolute',
36                     'height': '150px',
37                     'width': '150px',
38                     'z-index': '100000'
39                 })
40                 .appendTo($('body'))
41                 .animate({
42                     'top': cart.offset().top + 10,
43                     'left': cart.offset().left + 10,
44                     'width': 75,
45                     'height': 75
46                 }, 1000, 'easeInOutExpo');
47 
48             setTimeout(function () {
49                 cart.effect("shake", {
50                     times: 3
51                 }, 200);
52             }, 1500);
53 
54             imgclone.animate({
55                 'width': 16,
56                 'height': 10
57             }, function () {
58                 //   $(this).detach()
59             });
60 
61             var cart_count = $('.shopping-cart_count');
62             //cart_count.text()
63             cart_count.text(wcart_count_value)
64             cart.attr('style','color:red')
65             cart_count.attr('style','color:red')
66 
67         }
68     });
69     //-->
70 </script>

https://github.com/ElmahdiMahmoud/fly-to-cart-effect

https://codepen.io/anon/pen/ggdzEK?editors=1111

https://codepen.io/elmahdim/pen/tEeDn

http://www.zhangxinxu.com/wordpress/2013/12/JavaScript与元素间的抛物线轨迹运动/

https://github.com/amibug/fly