购物车
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ width: 800px; } li{ list-style: none; } #box>li{ width: 200px; height: 200px; float: left; text-align: center; padding: 10px 0px; } ul img{ width: 160px; height: 140px; box-shadow: 0px 0px 5px black; } #aside{ width: 50px; position: fixed; top: 0; right: 0; bottom: 0; } #menu{ width: 50px; position: fixed; top: 0; right: 0; bottom: 0; background: black; } #menu>li{ width: 40px; height: 40px; background: white; margin: 5px 0px 5px 5px; } .fly{ position: absolute; width: 40px; height: 40px; } #ul1{ position: fixed; width:300px; top:0px; bottom:0px; right:-300px; background:green; } </style> </head> <body> <!--box是用来装载商品的元素--> <ul id="box"></ul> <!--aside是侧边栏--> <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> // 字符串模版,把所有商品显示在页面中 var html = ``; db.forEach(obj=>{ // 对每一个商品循环 html+=` <li> <img src="images/${obj.img}"><br> <input type="button" value="添加到购物车" /> </li> `; }); box.innerHTML = html; // 把那一堆商品,显示到box中 // 事件委托,添加到购物车功能 box.onclick = e=>{ var body = document.body; // 获取body var el = e.target; // 点击了哪个元素 if( el.nodeName == "INPUT" ){ // 如果点击的是按钮 var licr = el.parentNode.children; // 按钮的父节点的所有子节点 var img = licr[0]; // li中的图片 var btn = licr[2]; // li中的按钮 var cImg = img.cloneNode(); // 拷贝li中的图片 body.appendChild(cImg); // 把拷贝的图片,放入body中 cImg.className = "fly"; // 设置css样式 // 解构赋值,设置初始坐标 //li1.innerHTML = cImg; [cImg.style.left, cImg.style.top] = [btn.offsetLeft+"px", btn.offsetTop+"px"]; // 可以以直线的形式,把商品抛到购物车栏中 //startMove(cImg, {"left":menu.offsetLeft+li1.offsetLeft, "top":li1.offsetTop}); var tarX = menu.offsetLeft+li1.offsetLeft; // 目标x var tarY = li1.offsetTop + document.documentElement.scrollTop; // 目标y // 可以以抛物线的形式,把商品跑到购物车栏中 parabola(cImg, tarX, tarY, -0.001, function(){//当抛到目标点后,执行的回调函数 body.removeChild(cImg);//当跑到目标点后,删除那个飞起来的图片 }); } } // 侧边栏点击事件 li1.onclick = ()=>{ if( ul1.style.right=="0px" ){ // 如果侧边栏是显示的 startMove(ul1,{"right":-300}); // 侧边栏隐藏 }else{ // 如果侧边栏是隐藏的 startMove(ul1,{"right":0}); // 侧边栏显示 } // 注:第一次触发该函数时,侧边栏是隐藏的,但right取不出值,所以要通过代码把侧边栏显示出来。 } </script> </body> </html>