<script>
//offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
$(function() {
var offset = $("#shopcar").offset();
$(".addcar").click(function(event){
var addcar = $(this);
var img = addcar.parents(".box1_info").prev(".box1_img").find('img').eq(0).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: '170px'}, 200).fadeOut(1000);
//addcar.css("cursor","default").unbind('click');加入购物车不可点击
this.destory();//销毁抛物体
}
});
});
});
</script>
//offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
$(function() {
var offset = $("#shopcar").offset();
$(".addcar").click(function(event){
var addcar = $(this);
var img = addcar.parents(".box1_info").prev(".box1_img").find('img').eq(0).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: '170px'}, 200).fadeOut(1000);
//addcar.css("cursor","default").unbind('click');加入购物车不可点击
this.destory();//销毁抛物体
}
});
});
});
</script>
加入购物车实现抛物线效果
最新推荐文章于 2022-03-16 21:36:44 发布