jquery-fly實現新增購物車拋物線效果（angular版）
阿新 • • 發佈：2019-01-03
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <title>小球飛入效果</title> </head> <script src="jquery.min.js"></script> <script src="jquery.fly.min.js"></script> <script src="ionic.bundle.min.js"></script> <body> <div class="container" ng-controller="myCtrl"> <div class="demo clearfix"> <div class="per"> <div class="title" ng-click="addCart($event)">點選加入購物車</div> </div> </div> </div> <div id="icon-cart" style="margin-top: 100px">我是購物車</div> </body> <script> angular.module('myApp', []) .controller('myCtrl', function ($scope) { $scope.addCart = function(event) { var offset = $("#icon-cart").offset(); var flyer = $('<div style="width: 20px;height: 20px;border-radius: 50%;background: red;z-index: 1000"></div>'); //拋物體物件 flyer.fly({ start: { left: event.pageX,//拋物體起點橫座標 top: event.pageY //拋物體起點縱座標 }, end: { left: offset.left + 10,//拋物體終點橫座標 top: offset.top + 10, //拋物體終點縱座標 }, onEnd: function() { this.destroy(); //銷燬拋物體 } }); } }) </script> </html>
專案包下載地址：https://download.csdn.net/download/qq_33040483/10892808