蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 45|回复: 0

jQuery仿天猫实现超炫的加入购物车

[复制链接]

1979

主题

1

好友

1609

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 2017-10-12 21:09:06 |显示全部楼层
    jQuery仿天猫实现超炫的加入购物车
    超炫加入购物车效果,和天猫、聚美优品加入购物车效果相媲美。本文介绍一款加入购物车插件jqueryflyminjs,点击加入购物车,物品以抛物线动画效果到达购物车。
    演示图:

    HTML

    首先加载jQueryjs和jqueryflyminjs插件。



    lt;script src="jqueryjs"gt;lt;/scriptgt;
    lt;script src="jqueryflyminjs"gt;lt;/scriptgt;


    接着,作4个商品进行演示,每个商品中有图片、价格、名称以及加入购物车按钮等信息。



    lt;div class="demo clearfix"gt;
      lt;div class="per"gt;
      lt;img src="images/1jpg" width="180" height="240" alt="图片二" /gt;
      lt;h3gt;yen;lt;spangt;25900lt;/spangt;lt;/h3gt;
      lt;div class="title"gt;春款真皮坡跟大码单鞋内增高女士鞋子lt;/divgt;
      lt;a href="javascript:void(0);" class="button orange addcart"gt;加入购物车lt;/agt;
      lt;/divgt;
      lt;div class="per"gt;
      lt;img src="images/2jpg" width="180" height="240" alt="图片二" /gt;
      lt;h3gt;yen;lt;spangt;13600lt;/spangt;lt;/h3gt;
      lt;div class="title"gt;韩国代购情侣棉衣棉服女款韩版羊羔毛大衣lt;/divgt;
      lt;a href="javascript:void(0);" class="button orange addcart"gt;加入购物车lt;/agt;
      lt;/divgt;
      lt;div class="per"gt;
      lt;img src="images/3jpg" width="180" height="240" alt="图片三" /gt;
      lt;h3gt;yen;lt;spangt;yen;72800lt;/spangt;lt;/h3gt;
      lt;div class="title"gt;冬季运动情侣羽绒棉马甲男士薄马甲lt;/divgt;
      lt;a href="javascript:void(0);" class="button orange addcart"gt;加入购物车lt;/agt;
      lt;/divgt;
      lt;div class="per"gt;
      lt;img src="images/4jpg" width="180" height="240" alt="图片四" /gt;
      lt;h3gt;yen;lt;spangt;11900lt;/spangt;lt;/h3gt;
      lt;div class="title"gt;原创-城市简约文艺纯色棉麻新中式小立领lt;/divgt;
      lt;a href="javascript:void(0);" class="button orange addcart"gt;加入购物车lt;/agt;
      lt;/divgt;
    lt;/divgt;


    jQuery

    我们要实现的效果是:当点击“加入购物车”按钮后,商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出到右侧的购物车里。在飞出之前,我们要获取当前商品的图片,然后调用fly插件,之后的抛物线轨迹都是由fly插件完成,我们只需定义起点和终点左边以及结束后销毁之前的动画。



    $(function() {
      var offset = $("icon-cart")offset();
      $("addcart")click(function(event) {
        var img = $(this)parent()children('img')attr('src'); //获取当前点击图片链接
        var flyer = $('lt;img class="flyer-img" src="' + img + '"gt;'); //抛物体对象
        flyerfly({
          start: {
            left: eventpageX,//抛物体起点横坐标
            top: eventpageY //抛物体起点纵坐标
          },
          end: {
            left: offsetleft + 10,//抛物体终点横坐标
            top: offsettop + 10, //抛物体终点纵坐标
          },
          onEnd: function() {
            $("tip")show()animate({width: '200px'},300)fadeOut(500);////成功加入购物车动画效果
            thisdestory(); //销毁抛物体
          }
        });
      });
    });


    以上代码即可完成加入购物车效果,是不是很棒啊!Fly插件官网:https://github/amibug/fly,另外兼容IE10以下需要添加以下js文件:



    lt;script src="requestAnimationFramejs"gt;lt;/scriptgt;


    以上所述就是本文的全部内容了,希望大家能够喜欢
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-23 06:50

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部