魂归来兮，三国英魂就此归位

最新推荐文章于 2024-07-13 11:46:18 发布

渔钓道人

最新推荐文章于 2024-07-13 11:46:18 发布

阅读量49

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/NiCE_PersoN__/article/details/131611639

版权

三国归位：

话不多说，先上图：

下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三国英雄归位</title>
    <style>
        /* 操控单个元素，布局方式：子元素绝对定位，父元素相对定位
            所有的子元素，left和top都是相对于父元素的左上顶点
            因此每个子元素的left和top初始值都不一样 
            
            操控批量的元素：
            父元素流式布局flex，子元素相对定位
            每个子元素都是相对于自身的初始位置，每个子元素的left和top初始值都是0
            */
        .f1,.f2{
            /* 流式布局 */
            display: flex;
            /* 每个子元素均匀分布 */
            justify-content: space-around;
        }
        .f1>img{
            width: 200px;
            height: 300px;
            position: relative;
        }
        .f2{
            margin-top: 150px;
        }
        .f2>div{
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    
        <div class="f1">
            <img src="imgs`/曹操.jpg" alt="" onclick="move1(this,0)">
            <img src="imgs`/貂蝉.webp" alt="" onclick="move1(this,1)">
            <img src="imgs`/关羽.webp" alt="" onclick="move1(this,2)">
            <img src="imgs`/刘备.jpg" alt="" onclick="move1(this,3)">
            <img src="imgs`/刘协.webp" alt="" onclick="move1(this,4)">
            <img src="imgs`/孙权.webp" alt="" onclick="move1(this,5)">
        </div>
   <div class="f2">
       <div>刘协</div>
       <div>曹操</div>
       <div>刘备</div>
       <div>孙权</div>
       <div>关羽</div>
       <div>貂蝉</div>
   </div>
</body>
<script>
    //  定义一个坐标对象，记录当前操作的元素位置
    let pos={x:0,y:0}
    // 定义一个数组，存放6哥对象，独立的记录每个对象的运动坐标
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表示当前正在操作的对象
        pos=arr[i]

        console.log(img)
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37:
                console.log('左')
                pos.x-=5
                img.style.left=pos.x+'px'
                break;
                case 39:
                console.log('右')
                pos.x+=5
                img.style.left=pos.x+'px'
                break;
                case 38:
                console.log('上')
                pos.y-=5
                img.style.top=pos.y+'px'
                break;
                case 40:
                console.log('下')
                pos.y+=5
                img.style.top=pos.y+'px'
                break;
            }
        }
    }
</script>
</html>

示例代码：

.f1,.f2{
            /* 流式布局 */
            display: flex;
            /* 每个子元素均匀分布 */
            justify-content: space-around;
        }

这段CSS代码定义了一个样式规则，其选择器为.f1,.f2。这表示该样式规则将应用于具有类名为"f1"或"f2"的所有元素。

在这个样式规则中，以下是每个属性的解释：

display: flex;: 这将使元素使用流式布局（flex布局）。Flex布局是一种强大的布局模式，可以方便地创建灵活的网页布局。
justify-content: space-around;: 这个属性设置了子元素在主轴上（横向）的对齐方式。space-around表示子元素会均匀地分布在主轴上，空白区域会平均分配到每个子元素的两侧。
综合起来，这段CSS代码会使具有类名"f1"或"f2"的元素应用流式布局，并且子元素在横向上均匀地分布。

.f1>img{
            width: 200px;
            height: 300px;
            position: relative;
        }

这段CSS代码定义了一个样式规则，其选择器为.f1 > img。这表示该样式规则将应用于.f1类下的直接子元素中的img元素。

在这个样式规则中，以下是每个属性的解释：

width: 200px;：这个属性设置了图片的宽度为200像素。
height: 300px;：这个属性设置了图片的高度为300像素。
position: relative;：这个属性设置了图片的定位方式为相对定位。相对定位允许使用top、right、bottom和left属性来调整元素的位置。
综合起来，这段CSS代码会使.f1类下的直接子元素中的img元素具有200像素宽、300像素高，并且进行相对定位。

.f2{
            margin-top: 150px;
        }

这段CSS代码定义了一个样式规则，其选择器为.f2。这表示该样式规则将应用于具有类名为"f2"的所有元素。

在这个样式规则中，以下是每个属性的解释：

margin-top: 150px;：这个属性设置了元素的上外边距为150像素。这会在元素的顶部创建一个空白区域，与上面的内容（或上面的元素）之间产生一定的间距。
综合起来，这段CSS代码会使具有类名"f2"的元素具有150像素的上外边距，从而在元素顶部创建一个间距。

.f2>div{
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            text-align: center;
            line-height: 300px;
        }

这段CSS代码定义了一个样式规则，其选择器为.f2 > div。这表示该样式规则将应用于.f2类下的直接子元素中的div元素。

在这个样式规则中，以下是每个属性的解释：

width: 200px;：这个属性设置了div元素的宽度为200像素。
height: 300px;：这个属性设置了div元素的高度为300像素。
border: 1px solid rebeccapurple;：这个属性设置了div元素的边框样式为1像素宽的实线边框，颜色为rebeccapurple。
text-align: center;：这个属性设置了div元素内文本的水平居中对齐。
line-height: 300px;：这个属性设置了div元素内文本的行高为300像素，使其垂直居中对齐。
综合起来，这段CSS代码会使.f2类下的直接子元素中的div元素具有200像素宽、300像素高的大小，带有1像素宽的实线边框，文本在垂直和水平方向上都居中对齐。

 <div class="f1">
            <img src="imgs`/曹操.jpg" alt="" onclick="move1(this,0)">
            <img src="imgs`/貂蝉.webp" alt="" onclick="move1(this,1)">
            <img src="imgs`/关羽.webp" alt="" onclick="move1(this,2)">
            <img src="imgs`/刘备.jpg" alt="" onclick="move1(this,3)">
            <img src="imgs`/刘协.webp" alt="" onclick="move1(this,4)">
            <img src="imgs`/孙权.webp" alt="" onclick="move1(this,5)">
        </div>

这段HTML代码展示了一个包含多个图片的<div>容器，该容器具有类名为"f1"。每个图片都有自己的src属性和alt属性，并且在点击时会触发一个JavaScript函数move1()，并将当前点击的图片元素和一个数字作为参数传递给该函数。

<script>
    //  定义一个坐标对象，记录当前操作的元素位置
    let pos={x:0,y:0}
    // 定义一个数组，存放6哥对象，独立的记录每个对象的运动坐标
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表示当前正在操作的对象
        pos=arr[i]

        console.log(img)
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37:
                console.log('左')
                pos.x-=5
                img.style.left=pos.x+'px'
                break;
                case 39:
                console.log('右')
                pos.x+=5
                img.style.left=pos.x+'px'
                break;
                case 38:
                console.log('上')
                pos.y-=5
                img.style.top=pos.y+'px'
                break;
                case 40:
                console.log('下')
                pos.y+=5
                img.style.top=pos.y+'px'
                break;
            }
        }
    }
</script>

这段JavaScript代码定义了一个move1函数，用于处理图片的点击事件，并根据按键操作来改变图片的位置。

在该函数中，首先定义了一个坐标对象pos，用来记录当前正在操作的元素的位置。同时，还定义了一个数组arr，用于独立记录每个对象的运动坐标。

在点击图片时，move1函数会将当前操作的元素位置赋值给pos，然后通过document.onkeydown事件监听用户的按键操作。根据按下的键码（keyCode）来更新pos对象的坐标，并将新的坐标应用到图片元素的left和top样式上，实现图片的移动。

具体来说，在键盘按下的不同情况下：

按下左箭头键（keyCode为37），pos.x减去一个固定值，并将新的pos.x赋值给图片元素的left样式。
按下右箭头键（keyCode为39），pos.x加上一个固定值，并将新的pos.x赋值给图片元素的left样式。
按下上箭头键（keyCode为38），pos.y减去一个固定值，并将新的pos.y赋值给图片元素的top样式。
按下下箭头键（keyCode为40），pos.y加上一个固定值，并将新的pos.y赋值给图片元素的top样式。
这样，根据按键操作，当前被点击的图片就可以在页面上相应地移动。

case 37:
                console.log('左')
                pos.x-=5
                img.style.left=pos.x+'px'
                break;

case 37表示按下左箭头键时执行下面的代码。在这段代码中：

console.log('左')用于打印出"左"，以便在控制台输出提示信息。
pos.x-=5将当前操作元素的 x 坐标减去一个固定值（这里是 5）。
img.style.left=pos.x+'px'将新的 x 坐标值应用到图片元素的 left 样式上，通过修改 style.left 属性来实现横向移动。
因此，当按下左箭头键时，会将图片元素向左移动一个固定距离（这里是 5 像素）。

如果你希望调整移动的步长，可以更改 pos.x-=5 中的数值。例如，若要每次移动 10 个像素，则将 pos.x-=5 修改为 pos.x-=10。

文章到这里就告一段落了，欢迎下次光临。

渔钓道人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
魂归来兮，三国英魂就此归位

根据按下的键码（keyCode）来更新pos对象的坐标，并将新的坐标应用到图片元素的left和top样式上，实现图片的移动。综合起来，这段CSS代码会使.f2类下的直接子元素中的div元素具有200像素宽、300像素高的大小，带有1像素宽的实线边框，文本在垂直和水平方向上都居中对齐。按下左箭头键（keyCode为37），pos.x减去一个固定值，并将新的pos.x赋值给图片元素的left样式。按下右箭头键（keyCode为39），pos.x加上一个固定值，并将新的pos.x赋值给图片元素的left样式。
复制链接

扫一扫