购物车 

<!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>

 

posted @ 2018-04-17 22:48  悔创阿里-杰克马  阅读(155)  评论(0)    收藏  举报
求投食~（点图即可）