樣例
使用電商 APP 購買商品時，很多都有上圖的紅色小球拋物線效果，下面通過 jQuery.fly 插件來實現一個簡單 Demo。
實現
簡單思路：
- 確定拋物線的起始和終止位置；
- 通過 js 在起始位置創建一個 document 對象，作為紅色小球；
- 通過 jQuery.fly 插件提供的fly函數來移動小球，移動至終止位置；
- 當小球到達終止位置后，通過fly插件提供的 onEnd 回調函數，將小球銷毀；
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 實現效果
