當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

jQuery.fly插件实现添加购物车抛物线效果

發(fā)布時間：2023/11/27 生活经验 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery.fly插件实现添加购物车抛物线效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

樣例

使用電商 APP 購買商品時，很多都有上圖的紅色小球拋物線效果，下面通過?jQuery.fly?插件來實現(xiàn)一個簡單 Demo。

實現(xiàn)

簡單思路：

確定拋物線的起始和終止位置；
通過 js 在起始位置創(chuàng)建一個 document 對象，作為紅色小球；
通過 jQuery.fly 插件提供的fly函數(shù)來移動小球，移動至終止位置；
當小球到達終止位置后，通過fly插件提供的 onEnd 回調函數(shù)，將小球銷毀；

Demo 源碼：?

<!DOCTYPE html>
<html lang="zh" style="font-size: 46.875px;">
<head><meta charset="UTF-8"><title>fly Demo</title><style>td {height: 300px;}table {width:100%;}img {width: 30%;}</style><script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="../js/fly.min.js"></script><script type="text/javascript">function fly() {var x = $("#fashe").offset().left;var y = $("#fashe").offset().top;pwxTex(x, y);}// 拋物線特效function pwxTex(x, y) {var speedI = $("#speedI").val();var leftI = $("#b_leftI").val();var topI = $("#b_topI").val();// 獲得目標的偏移量var offset = $('#jieshou').offset();var div = document.createElement('div');div.className = 'pao';div.style.cssText = 'transform: translate3d(0, 0, 0);' +'width: 0.75rem;' +'height: 0.75rem;' +'border-radius: 50%;' +'background: red;' +'position: fixed;' +'z-index: 99999999;' +'top:'+x+'px;left:'+y+'px';// 將生成的 div 寫入 body 標簽下
            $('body').append(div);// 獲得生成的拋物線效果對象var flyer = $('.pao');var e_leftI = $('#e_leftI').val();var e_topI = $('#e_topI').val();flyer.fly({start: {left: x - leftI,top: y - topI},end: {
//                  left: (offset.left + $('#jieshou').width() / 2), //結束位置
//                  top: (offset.top + $('#jieshou').height() / 1)
                    left : e_leftI,top : e_topI},speed: speedI, // 越大越快，默認1.2
                onEnd: function () { // 結束回調
                    $('#jieshou').css({'transform': 'scale(1)'}, 100);this.destory(); // 銷毀這個對象
                }});}</script>
</head>
<body><div><table><tr><td>zhengbin.cnblogs.com</td><td><img id="fashe" src="../img/tank.jpg"></td></tr><tr><td><img id="jieshou" src="../img/lajitong.jpg"></td><td>speed：<input id="speedI" type="text" value="2"><br>b_left：<input id="b_leftI" type="text" value="1"><br>b_top：<input id="b_topI" type="text" value="-10"><br>e_left：<input id="e_leftI" type="text" value="100"><br>e_top：<input id="e_topI" type="text" value="500"><br><button onclick="fly()">飛吧~~</button></td></tr></table></div>
</body>
</html>

Demo 實現(xiàn)效果

轉載于:https://www.cnblogs.com/zhengbin/p/6804508.html

總結

以上是生活随笔為你收集整理的jQuery.fly插件实现添加购物车抛物线效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Lecture 0 --基本说明
下一篇：【傻瓜教程】CentOS 7 下 LNM