html添加到购物车飞入动画效果,加入购物车的动画效果
html
index
-
加入购物车
加入收藏夹
-
加入购物车
加入收藏夹
- 购物车
0
我的购物车 - 我的资产
- 我的足迹
0
- 我要充值
js
(function(){
let totalBtn1 = 0,
totalBtn2 = 0;
function clickBtn() {
$('button').on('click',function () {
let img = $(this).parent().find('img');
let btn = $(this).attr('class');
let flyImg = img.clone().css({
'opacity':'0.6'
});
$('.wrapper').append(flyImg);
flyImg.css({
'z-index':999,
'border':'3px solid #fff',
'position': 'absolute',
'height' : img.height() + 'px',
'width' : img.width() + 'px',
'top' : img.offset().top +'px',
'left' : img.offset().left + 'px'
})
flyImg.animate({
'width' : 50 + 'px',
'height' : 50 + 'px',
'border-radius' : 100 + '%'
},function(){
let t;
if (btn == 'btn1'){
t = $('#btn1-add').offset().top - 60 + 'px';
totalBtn1 ++;
if(totalBtn1>99){
totalBtn1 = 99
}
}else if(btn = 'btn2'){
t = $('#btn2-add').offset().top - 60 + 'px';
totalBtn2 ++;
if(totalBtn2>99){
totalBtn2 = 99
}
}
flyImg.animate({
'top':t,
'left':($(document).width()-$('.rightBox').width()) + 'px',
'height':0 +'px',
'width' :0+'px',
},1500,function(){
flyImg.remove();
$('#btn2-add').html(totalBtn2);
$('#btn1-add').html(totalBtn1);
})
});
})
}
clickBtn();
})();
css
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrapper {
width:100%;
height:700px;
}
.wrapper .imgBox ul {
width:100%;
text-align:center;
margin-top:50px;
}
.wrapper .imgBox li {
display:inline-block;
height:300px;
width:300px;
margin-left:20px;
}
.wrapper .imgBox li img {
width:100%;
height:100%;
}
.wrapper .imgBox button {
margin-left:20px;
}
.rightBox {
position:fixed;
top:0;
right:0;
height:100%;
width:42px;
background-color:#444851;
}
.rightBox-ul {
margin-top:100px;
}
.rightBox-ul li {
position:relative;
}
.rightBox-ul li a {
display:block;
width: 40px;
min-height:50px;
text-decoration:none;
}
.fir a {
background:url('../img/index.png') 0px 0px no-repeat;
}
.thir a {
background:url('../img/index.png') 0px -200px no-repeat;
}
.four a {
background:url('../img/index.png') 0px -240px no-repeat;
}
.six a {
background:url('../img/index.png') 0px -314px no-repeat;
}
.seven {
margin-top:100px;
}
.seven a {
background:url('../img/index.png') 0px -442px no-repeat;
}
.sec i,
.fif i {
display:block;
height:40px;
width: 40px;
background:url('../img/index.png') 0px -60px no-repeat;
}
.sec .con {
height:48px;
width:16px;
color:#fff;
font-size:14px;
margin:5px 0 0 12px;
}
.leftBox{
width:92px;
height:38px;
background:#444851;
position:absolute;
left:-121px;
top:10px;
display:none;
color:#fff;
line-height: 38px;
text-align:center;
font-size:14px;
}
.sec span,
.fif span {
display:block;
height:21px;
width:21px;
border-radius:100%;
background-color: #ed145b;
color:#fff;
margin:15px 0 0 10px;
text-align:center;
line-height:21px;
}
.fif i {
background:url('../img/index.png') 0px -278px no-repeat;
}
.fif span {
background-color:#f40;
margin:5px 0 0 10px;
}
.fir-leftBox,
.sev-leftBox {
height:185px;
width:270px;
border:1px solid #cecece;
position:absolute;
top:5px;
left:-272px;
display:none;
}
.fir-leftBox {
background:url('../img/index-1.png') 0px 0px no-repeat;
}
.sev-leftBox {
width:165px;
left:-175px;
background:url('../img/index-2.png') 0px 0px no-repeat;
}
.show {
display:block;
}
html添加到购物车飞入动画效果,加入购物车的动画效果相关推荐
- 七天免登录(Cookie+session)+ 页面显示动画人物效果(萌娘+气泡效果)+购物车的实现代码
一.七天免登录(Cookie+session),基于实现jsp页面 页面效果:勾选7天免登录复选框,输入用户名和密码,点击登录即可,登录后可在cookie中查看用户登录信息,以及用户过期时间 1.登录 ...
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画 通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节 ...
- android属性动画作用范围,Android开发之动画效果浅析(一)
程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animatio ...
- android+水滴粘性动画,Android控件实现水滴效果
看到ios版上QQ刷新效果像水滴,然后自己也想着去实现这样的效果,这篇文章暂时没有介绍下拉刷新的效果,只是单独用一个控件来实现这样的水滴效果. 效果图如下: 一.总体思路 1.画两个圆形,其中一个就是 ...
- vue如何使用原生js写动画效果_Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
- uni-app小程序利用动画做出左右滑动切换的效果
需求:场景类似驾校刷题,手指从左往右大幅度滑动切换至上一题,手指从右往左大幅度滑动切换至下一题.已答题目直接显示正确与否和答案状态,所选答案不存在后端,后端只保存该题是否答过.答对还是答错的状态.获取 ...
- 用计算机实现的动画效果,运用PPT编辑动画效果
为了让幻灯片中的对象的动画效果丰富自然,我们可对其添加多个动画效果,例如,我们要对某张图片添加进入屏幕时的动画动作.在屏幕中的运动轨迹以及从屏幕中消失的动画动作,可先将该图片选中,然后依次添加进入式动 ...
- vue 数字动画递增_数字滚动动画效果 vue组件化
主要思路是利用css属性writing-mode:vertical-lr:通过设定最大字符长度,补零,去循环,然后添加style translate和transition来完成想要的效果: 子组件根据 ...
- android 开红包动画,Android实现红包雨动画效果
本文介绍了Android实现红包雨动画效果,分享给大家,希望对大家有帮助 红包雨 关于实现上面红包雨效果步骤如下: 1.创建一个红包实体类 public class RedPacket { publi ...
- android 卷轴动画,原来这种画卷展开的效果这么简单!三步即可做出来!太惊艳了...
原标题:原来这种画卷展开的效果这么简单!三步即可做出来!太惊艳了 我们在一些发布会或者开幕式上经常会看到这样的画卷展开效果,感觉特别惊艳,那么这种效果是怎么做出来的呢?其实很简单!我们用PPT就可以做 ...
最新文章
- 图的算法专题——最小生成树
- linux思考の为何要挂载
- 应用编排与管理:Job DaemonSet
- 01-申明变量及变量命名
- 调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别...
- Druid monitor中SQL监控显示不出数据(已解决)
- Node之HTTPS客户端
- 气体涡轮流量计和涡街流量计的区别
- PS时间轴制作动态图
- 分享一个python连接zookeeper的坑:句柄无效
- java 关键字 assert的学习
- 六字诀养生法 气功口诀
- 「win工具」Win 上好用的效率神器Wox
- IllegalStateException: Failed to introspect annotated methods on class org.springframework.boot.web.
- 福特汉姆大学计算机科学专业,福特汉姆大学计算机研究生
- 黑提葡萄水果宣传文案模版,水果店文案黑提葡萄
- android 开源远程工具项目scrcpy 简单使用
- 操作系统 进程管理(一)——进程的含义与状态
- C语言-数据输入与输出函数
- c4droid用c语言画爱心,【图片】[自学C语言第五天]发一个作品【c4droid吧】_百度贴吧...
热门文章
- mac brew 启动服务时报错“Bootstrap failed: 5: Input/output error”
- 检索网络方向的学生选修先行课为计算机网络,等价的关系代数表达式,其执行效率也是一样的。...
- 怎样预防电脑辐射脱发
- 小球碰撞python代码_python开发的小球完全弹性碰撞游戏代码_python_脚本之家
- 三年级计算机 键盘指法 教案,第13课 键盘指法练习
- Ubuntu20.04安装Steam报错及解决
- 撰写SCI论文好用的免费工具(上) - 易智编译EaseEditing
- 【leetcode】189.旋转数组 (四种方法开阔思路,java实现!)
- 使用Tibco项目docker部署报错异常
- 最新免费网站空间申请网站集合