JS(二十八)居中横线-其他登陆方式或者数据加载完成

本文介绍了一种使用CSS的vertical-align属性来实现文字与其他元素垂直居中的方法,并展示了一个仅用一个div元素完成类似布局效果的例子。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、原理:利用vertical-align属性设置负值,实现样式;

1.html部分

<div class="other-way-login">
    <span class="line"></span>  
    <span class="txt">其他登录方式</span>  
    <span class="line"></span>  
</div>

2.css部分

.other-way-login {
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    text-align: center;
}
.other-way-login .line {
    display: inline-block;
    width: 150px;
    border: 1px solid black;
}
.other-way-login .txt {
    color: black;
    vertical-align: middle;
    vertical-align: -20%;
    margin: 0 30px;
}

二、一个div搞定

<!DOCTYPE HTML>  
<html>  
<head>    
</head>  
<body>  
<div class="searchEnd" style="height:1px;border-left:300px solid #ccc;border-right:300px solid #ccc;width:120px;line-height:1px;text-align:center;color:#aaa;margin:auto;font-size:12px;font-weight:600">我是有底线的</div>  
</html>  

<think>好的,我需要分析用户提供的HTML、CSS和JavaScript代码,并理解其功能。首先,我会逐步拆解每个部分的作用。 首先看HTML结构。代码中有两个`<div>`元素,id分别为`centerCrosshair`和`movableCrosshair`。这两个元素应该是用来显示十字准星的。`<!DOCTYPE html>`声明了文档类型,`<html>`标签包裹了整个内容,`<head>`部分包含标题和样式,`<body>`里有这两个div和脚本。 接下来是CSS部分。`body`的样式设置了外边距为0,高度为视口高度,并使用flex布局让内容居中。`#centerCrosshair`和`#movableCrosshair`都设置为绝对定位,宽度100px,高度5px,背景红色。看起来这两个元素都是水平线,因为高度较小而宽度较长。`#centerCrosshair`通过`top: 50%; left: 50%; transform: translate(-50%, -50%);`居中,这会将元素的中心点对准页面中心。而`#movableCrosshair`初始位置在中心点偏移20px的位置,可能是在右下方向。 然后是JavaScript部分。事件监听器监听了键盘的`keydown`事件。当按下方向键时,获取`movableCrosshair`元素,读取当前的top和left值,并根据按下的方向键调整这些值,每次移动1px。例如,按下上箭头,top值减1px,元素上移。 现在需要确认这两个十字准星的结构。由于两个div的高度都是5px,宽度100px,可能原本设计为十字线,但目前的代码只显示了两条水平线。可能缺少垂直线部分,导致看起来像两条横线而非十字。用户可能希望十字准星由水平和垂直两条线交叉组成,但当前代码只实现了水平部分,可能需要调整CSS来添加垂直线。 另外,JavaScript部分只移动了`movableCrosshair`,即下方的横线,而中间的`centerCrosshair`是定的。这可能是一个可移动的准星相对于中心准星的位置调整,但当前结构下,两个都是横线,移动的可能只是一条线,而非完整的十字。可能需要检查代码是否正确实现了十字准星的结构,或者是否存在样式上的错误。 总结代码功能:页面显示两个红色横线,一个居中,另一个初始位置在中心右下方20px处。通过方向键可以移动下方的横线,每次按方向键移动1px。但可能用户意图是创建十字准星,而当前代码只实现了水平部分,需要补充垂直线的样式。</think>这个代码实现了一个可通过方向键移动的红色十字准星效果。让我们逐步分析其结构和原理: $\text{一、HTML 结构分析}$ 1. 创建两个`<div>`元素: - `#centerCrosshair`:居中的基准准星 - `#movableCrosshair`:可通过键盘移动的准星 $\text{二、CSS 关键样式解析}$ ```css /* 垂直居中布局 */ body { height: 100vh; /* 全屏高度 */ display: flex; /* 启用弹性布局 */ } /* 准星通用样式 */ #centerCrosshair, #movableCrosshair { position: absolute; /* 绝对定位 */ width: 100px; /* 水平线长度 */ height: 5px; /* 线宽 */ background-color: red; /* 红色 */ } /* 定准星定位 */ #centerCrosshair { top: 50%; /* 垂直居中 */ left: 50%; /* 水平居中 */ transform: translate(-50%, -50%); /* 精确居中 */ } /* 可移动准星初始位置 */ #movableCrosshair { top: calc(50% + 20px); /* 中心向下偏移20px */ left: calc(50% + 20px); /* 中心向右偏移20px */ } ``` $\text{三、JavaScript 交互逻辑}$ ```javascript document.addEventListener('keydown', function(event){ const crosshair = document.getElementById('movableCrosshair'); // 获取当前坐标值 let style = window.getComputedStyle(crosshair); let topValue = parseInt(style.top); // 当前垂直位置 let leftValue = parseInt(style.left); // 当前水平位置 // 方向键处理 switch (event.key) { case 'ArrowUp': // 上移1px crosshair.style.top = `${topValue - 1}px`; break; case 'ArrowDown': // 下移1px crosshair.style.top = `${topValue + 1}px`; break; case 'ArrowLeft': // 左移1px crosshair.style.left = `${leftValue - 1}px`; break; case 'ArrowRight': // 右移1px crosshair.style.left = `${leftValue + 1}px`; break; } }); ``` $\text{四、效果演示说明}$ 1. 页面加载后会显示两个红色水平线: - 定准星始终居中 - 可移动准星初始位置在中心点右下20px处 2. 通过键盘方向键可逐像素移动可移动准星 $\text{五、改进建议}$ 当前实现存在两个可优化点: 1. 准星实际只是水平线,若要实现完整十字效果,需要添加垂直样式: ```css /* 完整十字准星应包含垂直部分 */ .crosshair::after { content: ''; position: absolute; width: 5px; height: 100px; left: 50%; transform: translateX(-50%); } ``` 2. 移动步长定为1px,可添加加速功能: ```javascript let step = event.shiftKey ? 10 : 1; // 按住Shift加速 ``` 这个代码适合作为射击类游戏的瞄准调试工具,或UI定位辅助工具的基础框架。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fullstack_lth

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值