思路:点击商品,图片就会飞入购物车,不但变小,而且加入到购物车后消失 了,不但如此,商品的图片还在,所以我们使用克隆的方法,加入到购物车后清除购物车即可,然后购物车+1

首先获取商品图片的位置及大小,并放到body上(否则飞入的时候看不到效果),然后获取购物车的方位,最后使用动画效果实现飞入效果。

注意:怎么找商品的图片,先找父元素,再从父元素下找图片的位置

前提准备:

html部分:

¥3499.00
LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计
加入购物车

¥3499.00
Hisense/海信 LED50T1A 海信电视官方旗舰店
加入购物车

            
¥3499.00
LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计
加入购物车

¥3499.00
LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计
加入购物车

¥3499.00
Hisense/海信 LED50T1A 海信电视官方旗舰店
加入购物车

¥3499.00
LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计
加入购物车

0

css部分:*{    padding:0px;    margin:0px;    font-family:"微软雅黑";}a{    text-decoration:none;/*取消超链接的样式*/}.ditem{    width:220px;    height:352px;    border:solid 1px #ccc;    float:left;    margin:0px 5px;    font-size:14px;    margin-top:10px;}#dpros{    width:750px;}.dprice{    height:30px;    width:100%;    text-align:center;    color:#f00;    font-size:20px;    font-weight:900;}.dbtn a{    /*margin-top:10px;*/    width:150px;    height:36px;    background-color:#ff6a00;    display:block;    text-align:center;    line-height:36px;    color:#fff;    font-size:20px;    margin:10px auto;    border-radius:12px;}#dcar{    top:300px;    position:absolute;    right:0px;    width:72px;    height:63px;    background-image:url("../img/car.jpg");}#dprocount{    width:20px;    height:20px;    background-color:#f00;    color:#fff;    font-size:12px;    border-radius:100%;    text-align:center;    line-height:20px;}

jQuery部分:重点var iCount = 0; //购物车的变量,用来增加购物车的数量的临时变量$(function(){    $(".dbtn").click(function(){ //点击“加入购物车”触发时事件        iCount++;  //点击一次就+1        var addImg = $(this).parent().find(".dpic").find("img");  //找到该商品的图片        var cloneImg = addImg.clone();  //对该图片进行克隆        cloneImg.css({        //克隆的样式            "width": "250px",            "height": "250px",            "position":"absolute",        //绝对定位            "left":addImg.offset().left,  //该图片的left位置            "top":addImg.offset(),top,    //该图片的top位置            "z-index":"200",              //层级,越大越在上             "opacity":"0.5"              //透明度  半透明        });        //克隆到body上的购物车位置        cloneImg.appendTo($("body")).animate({            "width":"50px",  //克隆后的宽            "height":"50px",  //克隆后的宽            "left":$("#dcar").offset().left,  //克隆后的left位置  购物车            "top": $("#dcar").offset().top,   //克隆后的left位置  购物车        },1000,function(){      //克隆后            $("#dprocount").html(iCount);   //购物车上的数 +1            $(this).remove(); //清空购物车  不清除图片会叠加        });     });});

android 飞入购物车,jQuery实现飞入购物车功能相关推荐

  1. jquery mysql实现加入购物车_jQuery实现加入购物车飞入动画效果

    HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购 ...

  2. 云炬Android开发笔记 13购物车,订单,支付功能开发(包含支付宝支付和微信支付)

    阅读目录 1.购物车UI编写 1.1 购物车布局  1.2 recycleView中的item的布局 2. 购物车数据结构分析.解析与转化 2.1 解析的数据 2.2 数据的转化 2.3 数据适配器的 ...

  3. jQuery实现简单购物车功能

    jQuery实现购物车功能有: 主要有添加商品 增加和减少商品数量 点击购物车时  库存也相应的减少 数量的 减少   库存进行增加 根据增加.减少或选择的商品获取金额 实现商品价格的计算 删除    ...

  4. html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...

    学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...

  5. 连接真机开发安卓(Android)移动app MUI框架 完善购物车订单等页面——混合式开发(五)

    https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...

  6. Android商城开发----点击加入购物车,购物车商品的增删减

    Android商城开发----点击加入购物车,购物车商品的增删减 上一章节:[分类页面]点击左侧类别,实现右侧对应类别商品的展示 本文是在上一章节基础上开发的,点击[分类]页面商品的加入购物车按钮,实 ...

  7. java web购物车_java web开发——购物车功能实现

    之前没有接触过购物车的东东,也不知道购物车应该怎么做,所以在查询了很多资料,总结一下购物车的功能实现. 查询的资料,找到三种方法: 1.用cookie实现购物车: 2.用session实现购物车: 3 ...

  8. 瑞吉外卖(27)-查看购物车信息、清空购物车功能开发

    文章目录 代码开发 查看购物车信息 修改前端请求 编写ShoppingCartController.java 注意createtime字段 功能测试 清空购物车 自己的思路与代码 分析前端请求 Sho ...

  9. ectouch购物车添加勾选结算功能

    购物车勾选结算功能 开发使用的是ectouch企业版,带有购物车功能. 当前功能:在商品详情页面,点击添加购物车后,会进入购物车中.在购物车页面,点击'立即购买'会将购物车中的全部商品都结算生成订单. ...

最新文章

  1. Shell脚本示例代码
  2. java list用法_java list的用法详解
  3. DL之SPP-Net:SPP-Net算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
  4. boost::fusion::replace_if用法的测试程序
  5. ajax respon有数据,Ajax怎么通过response在后台传递数据?(附代码)
  6. Ptsn多用处软件APP源码-可当图文或壁纸等多种软件
  7. atitit.跨语言执行cmd cli api的原理及兼容性设计草案
  8. 成都计算机学校分数线,成都市计算机汽车职业技术学校2020年招生录取分数线...
  9. CentOS下GitLab的安装部署
  10. php中几个数组函数array_slice() array_filter array_unique() in_array()
  11. ArcGIS 道路线数据处理与拓扑操作
  12. 博图安装msi失败_博途,V13,安装出现如此问题如何解决
  13. windows10小白第一次装,严格参考教程(转)
  14. ThinkBook 14P Win11网卡驱动掉了-解决方案
  15. Cell Host | 张群业/王哲/张澄-肠道微生物群失调加重腹主动脉瘤
  16. 周杰 清华大学计算机学院,清华大学自动化系主任周杰教授访问我院并做学术报告...
  17. Soul源码总结-01-21
  18. POI 2011 切题记
  19. Error creating bean with name ‘sqlSessionFactory’ defined in class path reso
  20. 葡萄酒数据集_如何使用数据科学来理解什么使葡萄酒味道更好

热门文章

  1. HDU 3966 POJ 3237 HYSBZ 2243 HRBUST 2064 树链剖分
  2. Matlab应用于配送linprog,Matlab应用实例(4)—linprog(02高级)
  3. java记录计算同比上升下降
  4. 分享爬取智联的一段源码
  5. Builtin/administrators 与 Domain Admins 用户组的来历与区别
  6. 云服务器(阿里云,百度云,华为云,腾讯云)搭建Hadoop(Nameode,SecondaryNamenode,datanode)
  7. 力控打磨抛光工具应用于各种条件表面抛光处理
  8. 远光软件参与鲲鹏技术分享沙龙 共促区域信创产业发展
  9. performance介绍
  10. beginning php and mysql_Beginning PHP and MySQL 5