三国英雄归位

最新推荐文章于 2024-09-15 21:53:26 发布

执念1314

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量57

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_78992368/article/details/131615034

版权

这是一个使用HTML、CSS和JavaScript实现的三国英雄卡牌布局示例。用户可以通过键盘箭头键控制卡牌在页面上的移动，卡牌采用相对定位，布局方式包括流式布局和绝对定位。代码展示了如何通过事件监听和坐标更新实现元素动态移动。

摘要由CSDN通过智能技术生成

三国英雄归位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 操控单个元素，布局方式：子元素绝对定位，父元素相对定位，所有的子元素，left和top都是相对于父元素的左上顶点，因此每个子元素的left和top的初始值不一样。 */
    .f1,.f2{
        /* 操控批量的元素：
            父元素流式布局flex,子元素相对定位
            每个子元素都是相对于自身的初始位置
            每个子元素的left和top初始值都是0 */
        /* 流式布局 */
        display: flex;
        /* 均匀分布 */
        justify-content: space-around;
    }
    .f1>img{
        width: 200px;
        height: 300px;
        position: relative;
        left: 0;
        top:0
    }
    .f2{
        margin-top: 100px;
    }
    .f2>.z{
        width: 200px;
        height: 300px;
        border: 1px solid rebeccapurple;
        text-align: center;
        /* 行高与元素高度一致，则垂直居中 */
        line-height: 300px;
    }
</style>
<body>
    <div class="f1">
        <img src="./imgs/关羽.webp" alt="" onclick="move1(this,0)">
        <img src="./imgs/刘备.jpg" alt="" onclick="move1(this,1)">
        <img src="./imgs/刘协.webp" alt="" onclick="move1(this,2)">
        <img src="./imgs/貂蝉.webp" alt="" onclick="move1(this,3)">
        <img src="./imgs/曹操.jpg" alt="" onclick="move1(this,4)">
        <img src="./imgs/孙权.webp" alt="" onclick="move1(this,5)">
    </div>
    <div class="f2">
        <div class="z">貂蝉</div>
        <div class="z">曹操</div>
        <div class="z">刘备</div>
        <div class="z">关羽</div>
        <div class="z">孙权</div>
        <div class="z">刘协</div>
    </div>
</body>
<script>
    let pos={x:0,y:0}
    let arr=[{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0}]
    function move1(img,i){
        pos=arr[i]
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37:
                    pos.x-=5
                    img.style.left=pos.x+'px'
                    break;
                case 38:
                    pos.y-=5
                    img.style.top=pos.y+'px'
                    break;
                case 39:
                    pos.x+=5
                    img.style.left=pos.x+'px'
                    break;
                case 40:
                    pos.y+=5
                    img.style.top=pos.y+'px'
                    break;
            }
        }
    }
</script>
</html>

用键盘码来控制卡牌移动，因为相对定位是根据自己为主体，所以自己的x和y的值设为0。