jQuery.fly是一個(gè)非常流行的jQuery插件,其主要的功能是“飛行效果”。這個(gè)效果可以非常好地增強(qiáng)用戶(hù)體驗(yàn),讓網(wǎng)站更加美觀,更加動(dòng)態(tài)。
jQuery.fly插件的用法非常簡(jiǎn)單。在頁(yè)面中引入jQuery和jQuery.fly的JS文件后,我們可以通過(guò)一個(gè)簡(jiǎn)單的函數(shù)調(diào)用來(lái)實(shí)現(xiàn)“飛行效果”。下面是一個(gè)基本的用法示例:
$(function() { $('.add-to-cart').on('click', function() { var cart = $('.cart'); var imgtodrag = $(this).parent().find("img").eq(0); if (imgtodrag) { var imgclone = imgtodrag.clone() .offset({ top: imgtodrag.offset().top, left: imgtodrag.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() }); } }); });
通過(guò)上面的代碼,我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的“加入購(gòu)物車(chē)”功能,當(dāng)用戶(hù)點(diǎn)擊“加入購(gòu)物車(chē)”按鈕時(shí),商品圖片就會(huì)出現(xiàn)“飛行效果”,最終落在購(gòu)物車(chē)位置。我們可以通過(guò)調(diào)整JS代碼中的各種參數(shù),實(shí)現(xiàn)更炫酷的動(dòng)態(tài)效果。
總之,jQuery.fly是一個(gè)非常有用的jQuery插件,可以為網(wǎng)站帶來(lái)許多新鮮的動(dòng)態(tài)效果。如果你還沒(méi)有試過(guò)它,建議馬上下載并嘗試一下。