<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#menu{
width: 80px;
height: 100%;
position: fixed;
right: 0;
top: 0;
background: #9ACD32;
}
#menu>li{
width: 60px;
height: 60px;
margin:10px auto 0;
background: white;
}
.fly{
width: 60px;
height: 60px;
position:absolute;//关键点
}
#ul1{
width: 300px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
right:-300px;
background: skyblue;
}
#box li{
float: left;
text-align: center;
width: 200px;
height: 200px;
box-shadow: 0,0,5px #FFD700;
margin: 0 10px;
/*position: absolute;
left: 0;
top:0;*/
}
#box img{
width: 100%;
height: 150px;
display: block;
box-shadow: 0 0 5px #FFD700;
/*position: absolute;*/
}
#box{
position: relative;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="aside">
<ul id="ul1"></ul>
<ul id="menu">
<li></li>
<li></li>
<li></li>
<li id="li1"></li>
</ul>
</div>
<script type="text/javascript" src="js/parabola.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="../study1/startMove.js"></script>
<script>
var html =``;
db.forEach(function(obj){
html += `
<li>
<img src="images/${obj["img"]}"><br>
<input type = "button" value = "加入购物车" />
</li>
`
})
box.innerHTML = html;
var Btns = document.querySelectorAll("input");
var Imgs = document.querySelectorAll("img");
var len = Btns.length;
var leng = Imgs.length;
for(let i = 0 ; i<len ; i++){
console.log(Btns[i]);
Btns[i].onclick = (e)=>{
var Cimg = Imgs[i].cloneNode();
document.body.appendChild(Cimg);
Cimg.className = "fly";
[Cimg.style.left,Cimg.style.top] = [Btns[i].offsetLeft+"px",Btns[i].offsetTop+"px"];
console.log(Cimg.style.left,Cimg.style.top);
var tarX = menu.offsetLeft + li1.offsetLeft;
var tarY = document.documentElement.scrollTop + li1.offsetTop;
console.log(tarX,tarY);
parabola(Cimg,tarX,tarY,-0.001,function(){
document.body.removeChild(Cimg);
})
{
}
}
}
li1.onclick = function(){
if(ul1.style.right=="0px")
{
startMove(ul1,{"right":-300});
}else{
startMove(ul1,{"right":0});
}
}
</script>
</body>
</html>
