加入购物车

需要先引入相关的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="static/css/aui.min.css"/>

<script src="lib/jquery/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>

<script src="static/js/aui.min.js" type="text/javascript" charset="utf-8"></script>

<script src="static/js/aui.parabola.js" type="text/javascript" charset="utf-8"></script>

示例代码

<div id="app" class="container">
    <header class="aui-header">
        <a onclick="aui.closeWin()" class="aui-header-left">
            <i class="iconfont iconreturn"></i>
        </a>
        <div class="aui-header-title">加入购物车</div>
    </header>
    <div class="aui-content" style="padding: 60px 10px 50px;">
        <div data-id="0" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品1</div>
                <div id="0" onclick="addcart(0)" class="addcart addcart-0">＋</div>
            </div>
        </div>
        <div data-id="1" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品2</div>
                <div id="1" onclick="addcart(1)" class="addcart addcart-1">＋</div>
            </div>
        </div>
        <div data-id="2" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品3</div>
                <div id="2" onclick="addcart(2)" class="addcart addcart-2">＋</div>
            </div>
        </div>
        <div data-id="3" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品4</div>
                <div id="3" onclick="addcart(3)" class="addcart addcart-3">＋</div>
            </div>
        </div>
        <div data-id="4" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品5</div>
                <div id="4" onclick="addcart(4)" class="addcart addcart-4">＋</div>
            </div>
        </div>
        <div data-id="5" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品6</div>
                <div id="5" onclick="addcart(5)" class="addcart addcart-5">＋</div>
            </div>
        </div>
        <div data-id="6" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品7</div>
                <div id="6" onclick="addcart(6)" class="addcart addcart-6">＋</div>
            </div>
        </div>
        <div data-id="7" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品8</div>
                <div id="7" onclick="addcart(7)" class="addcart addcart-7">＋</div>
            </div>
        </div>
        <div data-id="8" class="goods-box">
            <img src="static/img/image/logo.png" alt="" class="goods-img">
            <div class="goods-info">
                <div class="goods-name">商品9</div>
                <div id="8" onclick="addcart(8)" class="addcart addcart-8">＋</div>
            </div>
        </div>
        <div class="move"></div>
    </div>
    <div class="footer">
        <div class="shopping-cart">购物车</div>
    </div>
</div>
<script type="text/javascript">
    function addcart(id){
        var _this = this;
        aui.parabola.init({
            origin: '.addcart-' + id,
            target: '.shopping-cart',
            element: '.move',
            radian: 0.008,
            time: 500,
            callback: function(){
                aui.toast({msg: '已加入购物车'});
            }
        });
        aui.parabola.move();
    }
</script>