基於jQuery加入購物車飛入動畫特效

基於jQuery加入購物車飛入動畫特效。這是一款電商購物網站經常使用的把商品加入購物車代碼。效果圖以下：

在線預覽   源碼下載

實現的代碼。

html代碼：

 <div id="main">
        <div class="demo">
            <div class="box">
                <img src="images/lg.jpg" width="180" height="180">
                <h4>
                    ¥<span>3499.00</span></h4>
                <p>
                    LG 49LF5400-CA 49寸IPS硬屏富貴招財銅錢設計</p>
                <a href="#" class="button orange addcar">加入購物車</a>
            </div>
            <div class="box">
                <img src="images/hs.jpg" width="180" height="180">
                <h4>
                    ¥<span>3799.00</span></h4>
                <p>
                    Hisense/海信 LED50T1A 海信電視官方旗艦店</p>
                <a href="#" class="button orange addcar">加入購物車</a>
            </div>
            <div class="box">
                <img src="images/cw.jpg" width="180" height="180">
                <h4>
                    ¥<span>¥3999.00</span></h4>
                <p>
                    Skyworth/創維 50E8EUS 8核4Kj極清酷開系統智能液晶電視</p>
                <a href="#" class="button orange addcar">加入購物車</a>
            </div>
            <div class="box">
                <img src="images/ls.jpg" width="180" height="180">
                <h4>
                    ¥<span>6969.00</span></h4>
                <p>
                    樂視TV Letv X60S 4核1080P高清3D安卓智能超級電視</p>
                <a href="#" class="button orange addcar">加入購物車</a>
            </div>
        </div>
    </div>
    <div class="m-sidebar">
        <div class="cart">
            <i id="end"></i><span>購物車</span>
        </div>
    </div>
    <div id="msg">
        已成功加入購物車！</div>
    </div>

css代碼：

 .demo
        {
            width: 820px;
            margin: 60px auto 10px auto;
        }
        
        .m-sidebar
        {
            position: fixed;
            top: 0;
            right: 0;
            background: #000;
            z-index: 2000;
            width: 35px;
            height: 100%;
            font-size: 12px;
            color: #fff;
        }
        .cart
        {
            color: #fff;
            text-align: center;
            line-height: 20px;
            padding: 200px 0 0 0px;
        }
        .cart span
        {
            display: block;
            width: 20px;
            margin: 0 auto;
        }
        .cart i
        {
            width: 35px;
            height: 35px;
            display: block;
            background: url(car.png) no-repeat;
        }
        #msg
        {
            position: fixed;
            top: 300px;
            right: 35px;
            z-index: 10000;
            width: 1px;
            height: 52px;
            line-height: 52px;
            font-size: 20px;
            text-align: center;
            color: #fff;
            background: #360;
            display: none;
        }
        
        .box
        {
            float: left;
            width: 198px;
            height: 320px;
            margin-left: 5px;
            border: 1px solid #e0e0e0;
            text-align: center;
        }
        .box p
        {
            line-height: 20px;
            padding: 4px 4px 10px 4px;
            text-align: left;
        }
        .box:hover
        {
            border: 1px solid #f90;
        }
        .box h4
        {
            line-height: 32px;
            font-size: 14px;
            color: #f30;
            font-weight: 500;
        }
        .box h4 span
        {
            font-size: 20px;
        }
        .u-flyer
        {
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            position: fixed;
            z-index: 9999;
        }
        
        .button
        {
            display: inline-block;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 16px/100% 'Microsoft yahei' ,Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }
        .button:hover
        {
            text-decoration: none;
        }
        .button:active
        {
            position: relative;
            top: 1px;
        }
        /* orange */
        .orange
        {
            color: #fef4e9;
            border: solid 1px #da7c0c;
            background: #f78d1d;
            background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
            background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
        }
        .orange:hover
        {
            background: #f47c20;
            background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
            background: -moz-linear-gradient(top,  #f88e11,  #f06015);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
        }
        .orange:active
        {
            color: #fcd3a5;
            background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
            background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
        }

js代碼：

  $(function () {
            var offset = $("#end").offset();
            $(".addcar").click(function (event) {
                var addcar = $(this);
                var img = addcar.parent().find('img').attr('src');
                var flyer = $('<img class="u-flyer" src="' + img + '">');
                flyer.fly({
                    start: {
                        left: event.pageX,
                        top: event.pageY
                    },
                    end: {
                        left: offset.left + 10,
                        top: offset.top + 10,
                        width: 0,
                        height: 0
                    },
                    onEnd: function () {
                        $("#msg").show().animate({ width: '250px' }, 200).fadeOut(1000);
                        addcar.css("cursor", "default").removeClass('orange').unbind('click');
                        this.destory();
                    }
                });
            });

        });

via：http://www.w2bc.com/Article/29464