首先引入jq的插件jquery.fly.min.js
下载地址https://github.com/amibug/fly
<script lang="javascript" type="text/javascript" src="/static/wap2/js/jquery.fly.min.js"></script>
#add_beixuan是点击的那个元素也是从这里开始滑动的元素
#icon-cart是滑动终点,滑动到这个元素
$("#add_beixuan").click(function (event){
var offset = $("#icon-cart").offset();
var flyer = $('<div id="hhh" style="background:#ff8000;width:45px;height:45px;border- radius:45px;z-index:9999;"></div>'); //抛物体对象,也可以用图片
flyer.fly({
start: {
left: event.pageX,//抛物体起点横坐标
top: event.pageY//抛物体起点纵坐标
},
end: {
left: offset.left+10,//抛物体终点横坐标
top: offset.top-30 , //抛物体终点纵坐标
},
speed: 0.3, //动画速度越小越慢
onEnd: function() {
$('#hhh').remove()
$('.jiaru').show()
$("#tip").show().animate({width: '200px'},500).fadeOut(500);成功加入购物车动画效果
// this.destory(); //销毁抛物体
}
});
})