<!DOCTYPE html> <html style=" 100%;height: 100%;"> <head> <meta charset="utf-8" /> <title></title> <style> body{ 100%; height: 100%; } *{ margin: 0; padding: 0; } li{ list-style: none; } #menu{ 80px; height: 100%; position: fixed; right: 0; top: 0; background: #9ACD32; } #menu>li{ 60px; height: 60px; margin:10px auto 0; background: white; } .fly{ 60px; height: 60px; position:absolute;//关键点 } #ul1{ 300px; height: 100%; position: fixed; top: 0; bottom: 0; right:-300px; background: skyblue; } #box li{ float: left; text-align: center; 200px; height: 200px; box-shadow: 0,0,5px #FFD700; margin: 0 10px; /*position: absolute; left: 0; top:0;*/ } #box img{ 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>