jQuery implements the animation effect of adding to the shopping cart

jQuery implements the animation effect of adding to the shopping cart_jquery

WBOY

Release： 2016-05-16 16:09:40

Original

1800 people have browsed it

HTML

First load the jQuery library file and jquery.fly.min.js plug-in.

Copy code The code is as follows:

Next, lay out the product information html structure. In this example, we arrange four products side by side. Each product box includes information such as product pictures, prices, names, and add-to-cart buttons.

Copy code The code is as follows:

￥3499.00

LG 49LF5400-CA 49-inch IPS hard screen rich copper coin design

Add to cart

￥3799.00

Hisense/Hisense LED50T1A Hisense TV Official Flagship Store

Add to cart

￥￥3999.00

Skyworth/Skyworth 50E8EUS 8-core 4Kj ultra-clear cool open system smart LCD TV

Add to cart

￥6969.00

LeTV Letv X60S 4-core 1080P HD 3D Android Smart Super TV

Add to cart

Then, we also need to add a shopping cart and prompt information on the right side of the page.

Copy code The code is as follows:

 
& Lt; I ID = "end" & gt; & lt;/i & gt; 

Added to shopping cart successfully!

CSS We use CSS to first arrange the products and beautify them, and then set the style of the shopping cart on the right. Please see the code for details:

Copy code The code is as follows:

.box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} 

.box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} 

.box:hover{border:1px solid #f90} 

.box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500} 

.box h4 span{font-size:20px} 

.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} 

.m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;} 

.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;} 

.cart span{display:block;width:20px;margin:0 auto;} 

.cart i{width:35px;height:35px;display:block; background:url(car.png) no-repeat;} 

#msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}

jQuery

我们要实现的效果是，当用户点击“加入购物车”按钮时，当前商品图片会变成一个缩小的圆球，以按钮为起点，向右侧以抛物线的形式飞出，最后落入页面右侧的购物车里，并提示操作成功。在飞出之前，我们要获取当前商品的图片，然后调用fly插件，之后的抛物线轨迹都是由fly插件完成，我们只需定义起点和终点等参数即可。

复制代码代码如下:

<script> <br>
$(function() { <br>
    var offset = $("#end").offset(); <br>
    $(".addcar").click(function(event){ <br>
        var addcar = $(this); <br>
        var img = addcar.parent().find('img').attr('src'); <br>
        var flyer = $('<img class="u-flyer" src="' img '">'); <br>
        flyer.fly({ <br>
            start: { <br>
                left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed <br>
                top: event.pageY //开始位置（必填） <br>
            }, <br>
            end: { <br>
                left: offset.left 10, //结束位置（必填） <br>
                top: offset.top 10, //结束位置（必填） <br>
                width: 0, //结束时宽度 <br>
                height: 0 //结束时高度 <br>
            }, <br>
            onEnd: function(){ //结束回调 <br>
                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 <br>
                addcar.css("cursor","default").removeClass('orange').unbind('click'); <br>
                this.destory(); //移除dom <br>
            } <br>
        }); <br>
    }); <br>
}); <br>
</script> 

复制上面的代码，保存并运行即可看到效果，Fly插件的项目官网地址是：https://github.com/amibug/fly，值得一提的是，IE10以下需要添加以下js：

以上就是本文的全部内容了，希望大家能够喜欢