头像

jQuery实现加入购物车飞入动画效果

来源:https://www.daimasucai.com/form/80.html 代码素材管理员 2016-12-26浏览()

当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入购物车按钮时,实现商品将飞入到右侧的购物车中的效果。

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

jQuery实现加入购物车飞入动画效果
分类:首页>>网页特效>>表单按钮 阅读次数:
查看演示 下载次数: 1

手机扫码访问:

下载资源 下载积分: 30

  HTML

  首先载入jQuery库文件和jquery.fly.min.js插件。

<div class="box"> 

    <img src="images/lg.jpg" width="180" height="180"> 

    <h4>¥<span>3499.00</span></h4> 

    <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p> 

    <a href="#" class="button orange addcar">加入购物车</a> 

</div> 

<div class="box"> 

    <img src="images/hs.jpg" width="180" height="180"> 

    <h4>¥<span>3799.00</span></h4> 

    <p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p> 

    <a href="#" class="button orange addcar">加入购物车</a> 

</div> 

<div class="box"> 

    <img src="images/cw.jpg" width="180" height="180"> 

    <h4>¥<span>¥3999.00</span></h4> 

    <p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p> 

    <a href="#" class="button orange addcar">加入购物车</a> 

</div> 

<div class="box"> 

    <img src="images/ls.jpg" width="180" height="180"> 

    <h4>¥<span>6969.00</span></h4> 

    <p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p> 

    <a href="#" class="button orange addcar">加入购物车</a> 

</div> 

  jQuery

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

<script> 

$(function() { 

    var offset = $("#end").offset(); 

    $(".addcar").click(function(event){ 

        var addcar = $(this); 

        var img = addcar.parent().find('img').attr('src'); 

        var flyer = $('<img class="u-flyer" src="'+img+'">'); 

        flyer.fly({ 

            start: { 

                left: event.pageX, //开始位置(必填)#fly元素会被设置成position: fixed 

                top: event.pageY //开始位置(必填) 

            }, 

            end: { 

                left: offset.left+10, //结束位置(必填) 

                top: offset.top+10, //结束位置(必填) 

                width: 0, //结束时宽度 

                height: 0 //结束时高度 

            }, 

            onEnd: function(){ //结束回调 

                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 

                addcar.css("cursor","default").removeClass('orange').unbind('click'); 

                this.destory(); //移除dom 

            } 

        }); 

    }); 

}); 

</script> 

  复制上面的代码,保存并运行即可看到效果


标签: 购物车 按钮
声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/form/80.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>