jquery-fly实现添加购物车抛物线效果（angular版）

最新推荐文章于 2019-09-16 15:52:00 发布

歌颂大海

最新推荐文章于 2019-09-16 15:52:00 发布

阅读量228

点赞数

分类专栏： angularJs 文章标签： jquery-fly 抛物线购物车

本文链接：https://blog.csdn.net/qq_33040483/article/details/85689727

版权

angularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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