<style>
.shopBox{
display: flex;
justify-content: space-between;
font-size: 1rem;
margin-bottom: 20px;
align-items: center;
height:60px;
}
.shopTBox{
display: flex;
align-items: center;
}
.shopTBox .iPic{
width: 5rem;
height: 5rem;
border-radius: 50%;
}
.carBox{
position: fixed;
left:50px;
bottom:50px;
width:100px;
height:100px;
background-color: pink;
border-radius: 50%;
z-index: 10;
}
.liACard{
width:2rem;
height:2rem;
background-color: #4a90e1;
color: #fff;
font-size: 2rem;
line-height: 1.7rem;
text-align: center;
border-radius: 50%;
}
.addTCar{
position: fixed;
top:0;
left:0;
line-height: 2rem;
z-index:9;
text-align: center;
color: #fff;
transition: 1s linear;
}
.addTCar .iconfont{
width: 2rem;
height: 2rem;
background: #4a90e1;
border-radius: 50%;
display: block;
transition: 1s cubic-bezier(0.5,-0.5,1,1);
}
.carBox.animate {
animation: footer-car-animate 500ms ease-in-out;
}
@keyframes footer-car-animate {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(1.1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
</style>
<body>
<div class="goodsList">
</div>
<div class="carBox">
</div>
<script>
var goods = [
{
title: 'huas'
},
{
title: 'df',
},
{
title: 'zs',
},
{
title: 'dt',
},
{
title: 'db',
}
];
class UIGoods{
constructor(g){
this.data=g;
this.choose=0;
}
}
//整个界面的数据
class UIData{
constructor(){
var uiGoods=[];
for(var i=0;i<goods.length;i++){
var uig=new UIGoods(goods[i])
uiGoods.push(uig);
}
this.goodsContainer=document.querySelector('.goodsList')
this.car=document.querySelector('.carBox')
console.log(uiGoods);
this.uiGoods=uiGoods;
this.createHTML();
this.listenEventer();
}
createHTML(){
var html='';
for(var i=0;i<this.uiGoods.length;i++){
var g=this.uiGoods[i];
html+=`
<div class="shopBox">
<div class="shopTBox">
<div>
</div>
<div>
${g.data.title}
</div>
</div>
<div index="${i}" class="liACard">+</div>
</div>`
}
this.goodsContainer.innerHTML=html;
}
carAnimate(){
this.car.classList.add('animate');
}
//监听各种事件
listenEventer(){
//监听购物车图标动画事件,结束后删除animate类dom
this.car.addEventListener('animationend',function(){
this.classList.remove('animate');
})
}
jump(index){
console.log(this.goodsContainer.children[index]);
var btnAdd=this.goodsContainer.children[index].querySelector('.liACard');
var rect=btnAdd.getBoundingClientRect();
var start={
x:rect.left,
y:rect.top
}
//获取购物车距离左侧,距离顶部的距离
var carBox=document.querySelector('.carBox').getBoundingClientRect();
console.log(carBox);
var end={
x:carBox.left+carBox.width/2,
y:carBox.top
}
//创建动画添加购物车动画效果的盒子
var div=document.createElement('div');
div.className='addTCar';
var i=document.createElement('i')
i.className='iconfont';
div.style.transform=`translateX(${start.x}px)`
i.style.transform=`translateY(${start.y}px)`
div.appendChild(i);
document.body.appendChild(div)
//强行渲染
div.clientWidth;
//设置结束位置
div.style.transform=`translateX(${end.x}px)`
i.style.transform=`translateY(${end.y}px)`
div.addEventListener('transitionend',()=>{
console.log('动画触发了');
div.remove();
this.carAnimate();
},{
once:true
})
}
}
let zhi=new UIData();
// //监听点击事件
// var ui=new UI();
zhi.goodsContainer.addEventListener('click',function(e){
console.log(e.target.classList);
//判断goodsListDom下的class中是否包含liACard属性
if(e.target.classList.contains('liACard')){
var index=+e.target.getAttribute('index')
zhi.jump(index);
}
})
</script>
</body>