购物车效果
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
