最近在毕设中,解决了这样一个需求:当我们点击加入购物车时,对应商品图片会飞入购物车内。首先要感谢涛涛帮我解决了上传图片的问题。
其实早就有大神做了一个fly插件,效果是图片呈抛物线轨迹飞入购物车,但是自己在用的时候调用destroy方法失败,图片总是销毁不了,只能动手写一个简单的了(没有抛物线效果,以后可以自己尝试写一下)。
首先是基本原理:在对应的商品图片处克隆一个完全相同的图片,然后让克隆出来的图片飞入购物车就好。
首先,获取图片,用clone方法克隆一个位置大小完全相同的图片出来,只是透明度不同,略做区别。
其次,获取购物车位置。
最后,自然是animate实现动画效果。
由于图片要从数据库中取,数据库中存放的是图片的路径,我想了一个办法,利用商品的id来绑定购物车按钮与其对应的商品图片。
<button class="shop-btn" id= <%= a.id %> οnclick="get_all(this.id)" >加入购物车</button>
<img id="img_<%= a.id%>" style="width: 195px;height: 195px" src=<%= a.avatar_url%>>
//css直接写在里面了。。。。。原谅我。。。。。这一生放荡不羁爱自由!!
当然,我们也得给每个按钮设置id好一一对应。
下面是JQuery
$(function(){ $('.shop-btn').click(function(){ var id = $(this).attr('id'); var fly = $('#img_' + id).clone().css('opacity','0.7'); fly.css({ 'z-index': 9, 'display': 'block', 'position': 'absolute', 'top': $('#img_' + id).offset().top +'px', 'left': $('#img_' + id).offset().left +'px', 'width': $('#img_' + id).width() +'px', 'height': $('#img_' + id).height() +'px' }); $('body').append(fly); fly.animate({ top:$('#end').offset().top, left:$('#end').offset().left, width:50, height:50 },1000,function(){$(this).remove()}); }); });