简单实现rails项目中商品飞入购物车动画效果

最近在毕设中，解决了这样一个需求：当我们点击加入购物车时，对应商品图片会飞入购物车内。首先要感谢涛涛帮我解决了上传图片的问题。

 

其实早就有大神做了一个fly插件，效果是图片呈抛物线轨迹飞入购物车，但是自己在用的时候调用destroy方法失败，图片总是销毁不了，只能动手写一个简单的了（没有抛物线效果，以后可以自己尝试写一下）。

首先是基本原理：在对应的商品图片处克隆一个完全相同的图片，然后让克隆出来的图片飞入购物车就好。

 

首先，获取图片，用clone方法克隆一个位置大小完全相同的图片出来，只是透明度不同，略做区别。

其次，获取购物车位置。

最后，自然是animate实现动画效果。

由于图片要从数据库中取，数据库中存放的是图片的路径，我想了一个办法，利用商品的id来绑定购物车按钮与其对应的商品图片。

<button class="shop-btn"  id= <%= a.id %> onclick="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()});
    });
});