加入购物车抛物线动画示范脚本

admin

模板案例(1yyg)

DIV:
加入购物车按纽（抛物线起点）:
<span class="addcart">加入购物车</span>
购物车盒子列表（抛物线终点）:
<div class="sidebar">
<div class="cart">
<i id="end"><em></em></i>
<span>购物车</span>
</div>
</div>

CSS:
.flyer,#end{ display:inline-block; width:20px; height:20px; font-size:0; background:url(2016.png) no-repeat 0 -400px;}
.sidebar{ position: fixed; top: 0; right: 0; background: #000; width: 35px; height: 100%; font-size: 12px; color: #fff; text-align:center; background:url(sentence.gif) #5c5550 no-repeat;}
.sidebar .cart{line-height:22px; width:20px; font-size:14px; font-weight:bold; margin:0 auto; margin-top:300px;}

JS:
<script type="text/javascript" src="SysThemes/js/jquery.js"></script>
<script type="text/javascript" src="systhemes/js/jquery.fly.js"></script>
jQuery(window).ready(function(e){
        jQuery('.addcart').on('click',AddCart);
})
function AddCart(event){
        var pos = $('#end').position(), offset=$('#end').offset(), flyer = $('<div class="flyer"></div>');
        flyer.fly({ start:{ left: event.clientX, top: event.clientY }, end:{ left: offset.left, top: pos.top, width: 20, height: 20 },onEnd: function(){ cart(); this.destory();/*销毁抛物体*/}});
}