jQuery.fly.js是一款非常實用的jQuery插件,可以讓你在網頁上添加飛動效果,經常用于購物車、點贊等功能。
它的官網是https://github.com/amibug/jquery.fly,你可以從這個網址下載它。
使用jQuery.fly.js非常簡單,在你的HTML文件中添加如下代碼:
<script src="https://cdn.jsdelivr.net/npm/jquery.fly/jquery.fly.min.js"></script>
然后,在你的JavaScript文件中調用它即可:
$('#add-to-cart').click(function () {
$('.product-item:first').clone()
.css({'opacity': '0.5', 'position': 'absolute', 'z-index': '1000'})
.appendTo('body')
.animate({
'top': $('#shopping-cart').offset().top + 10,
'left': $('#shopping-cart').offset().left + 10,
'width': 75,
'height': 75
}, 1000, 'easeInOutExpo');
setTimeout(function () {
$('#shopping-cart').effect('shake', {times: 2}, 200);
}, 1500);
$(this).blur();
return false;
});
以上代碼實現了一個添加到購物車的功能,當你點擊添加按鈕時,商品會被復制并在頁面上飛動到購物車的位置,同時購物車也會抖動,非常有趣。
總之,jQuery.fly.js是一個非常有趣和實用的jQuery插件,如果你想在你的網頁上添加一些動態效果,這是一個不錯的選擇。
上一篇vue怎么生成視頻
下一篇html照片墻代碼實列