android 飞入购物车,jQuery实现飞入购物车功能
思路:点击商品,图片就会飞入购物车,不但变小,而且加入到购物车后消失 了,不但如此,商品的图片还在,所以我们使用克隆的方法,加入到购物车后清除购物车即可,然后购物车+1
首先获取商品图片的位置及大小,并放到body上(否则飞入的时候看不到效果),然后获取购物车的方位,最后使用动画效果实现飞入效果。
注意:怎么找商品的图片,先找父元素,再从父元素下找图片的位置
前提准备:
html部分:
![](img/1.jpg)
![](img/2.jpg)
![](img/3.jpg)
![](img/1.jpg)
![](img/2.jpg)
![](img/3.jpg)
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实现飞入购物车功能相关推荐
- jquery mysql实现加入购物车_jQuery实现加入购物车飞入动画效果
HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购 ...
- 云炬Android开发笔记 13购物车,订单,支付功能开发(包含支付宝支付和微信支付)
阅读目录 1.购物车UI编写 1.1 购物车布局 1.2 recycleView中的item的布局 2. 购物车数据结构分析.解析与转化 2.1 解析的数据 2.2 数据的转化 2.3 数据适配器的 ...
- jQuery实现简单购物车功能
jQuery实现购物车功能有: 主要有添加商品 增加和减少商品数量 点击购物车时 库存也相应的减少 数量的 减少 库存进行增加 根据增加.减少或选择的商品获取金额 实现商品价格的计算 删除 ...
- html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...
- 连接真机开发安卓(Android)移动app MUI框架 完善购物车订单等页面——混合式开发(五)
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
- Android商城开发----点击加入购物车,购物车商品的增删减
Android商城开发----点击加入购物车,购物车商品的增删减 上一章节:[分类页面]点击左侧类别,实现右侧对应类别商品的展示 本文是在上一章节基础上开发的,点击[分类]页面商品的加入购物车按钮,实 ...
- java web购物车_java web开发——购物车功能实现
之前没有接触过购物车的东东,也不知道购物车应该怎么做,所以在查询了很多资料,总结一下购物车的功能实现. 查询的资料,找到三种方法: 1.用cookie实现购物车: 2.用session实现购物车: 3 ...
- 瑞吉外卖(27)-查看购物车信息、清空购物车功能开发
文章目录 代码开发 查看购物车信息 修改前端请求 编写ShoppingCartController.java 注意createtime字段 功能测试 清空购物车 自己的思路与代码 分析前端请求 Sho ...
- ectouch购物车添加勾选结算功能
购物车勾选结算功能 开发使用的是ectouch企业版,带有购物车功能. 当前功能:在商品详情页面,点击添加购物车后,会进入购物车中.在购物车页面,点击'立即购买'会将购物车中的全部商品都结算生成订单. ...
最新文章
- Shell脚本示例代码
- java list用法_java list的用法详解
- DL之SPP-Net:SPP-Net算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
- boost::fusion::replace_if用法的测试程序
- ajax respon有数据,Ajax怎么通过response在后台传递数据?(附代码)
- Ptsn多用处软件APP源码-可当图文或壁纸等多种软件
- atitit.跨语言执行cmd cli api的原理及兼容性设计草案
- 成都计算机学校分数线,成都市计算机汽车职业技术学校2020年招生录取分数线...
- CentOS下GitLab的安装部署
- php中几个数组函数array_slice() array_filter array_unique() in_array()
- ArcGIS 道路线数据处理与拓扑操作
- 博图安装msi失败_博途,V13,安装出现如此问题如何解决
- windows10小白第一次装,严格参考教程(转)
- ThinkBook 14P Win11网卡驱动掉了-解决方案
- Cell Host | 张群业/王哲/张澄-肠道微生物群失调加重腹主动脉瘤
- 周杰 清华大学计算机学院,清华大学自动化系主任周杰教授访问我院并做学术报告...
- Soul源码总结-01-21
- POI 2011 切题记
- Error creating bean with name ‘sqlSessionFactory’ defined in class path reso
- 葡萄酒数据集_如何使用数据科学来理解什么使葡萄酒味道更好
热门文章
- HDU 3966 POJ 3237 HYSBZ 2243 HRBUST 2064 树链剖分
- Matlab应用于配送linprog,Matlab应用实例(4)—linprog(02高级)
- java记录计算同比上升下降
- 分享爬取智联的一段源码
- Builtin/administrators 与 Domain Admins 用户组的来历与区别
- 云服务器(阿里云,百度云,华为云,腾讯云)搭建Hadoop(Nameode,SecondaryNamenode,datanode)
- 力控打磨抛光工具应用于各种条件表面抛光处理
- 远光软件参与鲲鹏技术分享沙龙 共促区域信创产业发展
- performance介绍
- beginning php and mysql_Beginning PHP and MySQL 5