jquery&zepto實現商品飛入購物車(手機端&PC端)
阿新 • • 發佈:2019-02-09
最近做一個手機端的商品加入購物車的專案, 首先引入jquery .js 手機端引入zepto.js 但是zepto沒有animate的這個方法 需要引入fx這個模組。主要程式碼如下:
/*飛入購物車*/ $('.btn-buy').bind('click',function(){ var img = $(this).parent().find('img'); var flyElm = img.clone().css('opacity', 0.75); $('body').append(flyElm); flyElm.css({ 'z-index': 9000, 'display': 'block', 'position': 'absolute', 'top': img.offset().top +'px', 'left': img.offset().left +'px', 'width': img.width() +'px', 'height': img.height() +'px' }); flyElm.animate({ top: $('.head-shopcart').offset().top+10, left: $('.head-shopcart').offset().left+10, width: 20, height: 32 }, 'slow', function() { flyElm.remove(); }); });