添加购物车的动画效果
程序员文章站
2022-05-02 20:06:58
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fly-item,
.fly-item>img {
position: absolute;
width: 50px;
height: 50px;
transition: transform .5s;
}
.fly-item {
display: none;
margin: -25px 0 0 -25px;
transition-timing-function: linear;
opacity: .5;
}
.fly-item>img {
transition-timing-function: cubic-bezier(.55, 0, .85, .36);
outline: 1px solid rgb(221, 46, 59);
}
.shop-cart {
/* width: 283px; */
height: 25px;
line-height: 25px;
padding-top: 8px;
/* background: url(./pic03.jpg); */
font-family: 'microsoft yahei';
font-size: 12px;
text-indent: 34px;
color: #000;
position: fixed;
right: 10px;
bottom: 0;
}
.btn-cart {
position: absolute;
width: 100px;
height: 40px;
left: 15.84%;
background: red;
top: 84.8392%;
text-indent: -99em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="image-x">
<div style="margin: 2000px 0"></div>
<a href="javascript:" id="btnCart" class="btn-cart"></a>
</div>
</div>
<!-- 终点 -->
<div id="shopCart" class="shop-cart">购物车 <span>0</span></div>
<!-- 飞行图片 -->
<div id="flyItem" class="fly-item"><img src="./pic03.jpg"></div>
</body>
<script>
var eleBtn = document.getElementById('btnCart');
var eleFlyItem = document.getElementById('flyItem');
var eleFlyImg = eleFlyItem.querySelector('img');
var eleCart = document.querySelector('#shopCart');
var isRunning = false;
eleBtn.addEventListener('click', function () {
// 现在按钮距离购物车的距离
var boundBtn = eleBtn.getBoundingClientRect();
var boundCart = eleCart.getBoundingClientRect();
// 中心点的水平垂直距离
var offsetX = boundCart.left + boundCart.width / 2 - (boundBtn.left + boundBtn.width / 2);
var offsetY = boundCart.top + boundCart.height / 2 - (boundBtn.top + boundBtn.height / 2);
// 页面滚动尺寸
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0;
if (isRunning == false) {
// 购物车图形出现与初始定位
eleFlyItem.style.display = 'block';
eleFlyItem.style.left = (boundBtn.left + scrollLeft + this.clientWidth / 2) + 'px';
eleFlyItem.style.top = (boundBtn.top + scrollTop + this.clientHeight / 2) + 'px';
// 开始动画
eleFlyItem.style.transform = 'translateX(' + offsetX + 'px)';
eleFlyImg.style.transform = 'translateY(' + offsetY + 'px)';
// 动画标志量
isRunning = true;
setTimeout(function () {
eleFlyItem.style.display = '';
eleFlyItem.style.transform = 'translateX(0)';
eleFlyImg.style.transform = 'translateY(0)';
isRunning = false;
eleCart.querySelector('span').innerHTML = eleCart.querySelector('span').innerHTML * 1 + 1;
}, 490);
}
});
</script>
</html>
上一篇： IOS 添加收藏的动画效果
下一篇： 上滑消失下滑显示效果时的动画效果