购物车动画实现原理

想要做一个简单的购物车添加动画，但是又不想使用插件去完成，可以使用该段代码，每节代码都添加了比较详细的注释，应该通俗易懂！

大致思路：

1、给添加按钮绑定一个点击事件； $(selector).on('even',function(){});

2、克隆一个商品图片（不仅限于图片），使其位置与原来相同； $(selector).clone();

3、给克隆得到的图片一个新的样式；

4、将克隆元素添加到body中； $(selector1).appendTo(selector2);

5、移动克隆元素到购物车处； $(selector).animate();

6、移动完成后执行队列的下一个动画，将克隆元素隐藏； $(selector).detach();

7、隐藏执行完毕，销毁本身。

<script>
    $('.add-to-cart').on('click', function () {//on绑定事件
        var cart = $('.shopping-cart');//购物车
        var imgtodrag = $(this).parent('.item').find("img").eq(0);//商品图片
        if (imgtodrag) {//如果商品图片存在
            var imgclone = imgtodrag.clone()//克隆商品图片，设置位置与原位置相同
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({//设置新图片的样式
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
            })
                .appendTo($('body'))//将其加入body中
                .animate({//设置动画
                'top': cart.offset().top + 10,//比购物车偏低10px
                    'left': cart.offset().left + 10,//比购物车偏右10px
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');//easeInOutExpo是一个回调函数
            
            imgclone.animate({//使图片隐藏
                'width': 0,
                    'height': 0
            }, function () {//图片隐藏后执行回调函数，移除自己
                $(this).detach()
            });
        }
    });
</script>

购物车动画实现原理

猜你喜欢