<!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