js+css使DIV始终居于屏幕中间 左下 左上 右上 右下
2025-05-02 22:46
JavaScript
82
0
0
0
标题录入
封面图
要实现一个 `div` 始终相对于屏幕居中、左下、左上、右上、右下,可以通过 JavaScript 和 CSS 的组合来完成。以下是一个完整的解决方案: ### HTML 结构 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Div Positioning</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="box" class="center">居中</div> <button onclick="setPosition('center')">居中</button> <button onclick="setPosition('left-bottom')">左下</button> <button onclick="setPosition('left-top')">左上</button> <button onclick="setPosition('right-top')">右上</button> <button onclick="setPosition('right-bottom')">右下</button> <script src="script.js"></script> </body> </html> ``` --- ### CSS 样式 (`styles.css`) ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; position: relative; overflow: hidden; } #box { width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; font-size: 20px; color: white; border-radius: 5px; } .left-bottom, .left-top, .right-top, .right-bottom { position: absolute; } ``` --- ### JavaScript 脚本 (`script.js`) ```javascript function setPosition(position) { const box = document.getElementById('box'); // 清除之前的定位类 box.classList.remove('left-bottom', 'left-top', 'right-top', 'right-bottom'); // 根据位置设置新的类 box.classList.add(position); // 动态调整位置 if (position === 'left-bottom') { box.style.bottom = '10px'; box.style.left = '10px'; } else if (position === 'left-top') { box.style.top = '10px'; box.style.left = '10px'; } else if (position === 'right-top') { box.style.top = '10px'; box.style.right = '10px'; } else if (position === 'right-bottom') { box.style.bottom = '10px'; box.style.right = '10px'; } else { // 默认居中 box.style.top = '50%'; box.style.left = '50%'; box.style.transform = 'translate(-50%, -50%)'; } } ``` --- ### 解释 1. **HTML**: - 提供了一个按钮组,用于切换 `div` 的位置。 - 每个按钮调用 `setPosition` 函数,并传递对应的位置参数。 2. **CSS**: - 设置了全局样式和 `#box` 的基础样式。 - 定义了绝对定位的四个方向类(`left-bottom`, `left-top`, `right-top`, `right-bottom`),这些类将在 JavaScript 中动态应用。 3. **JavaScript**: - 清除之前的位置类,避免冲突。 - 根据用户选择的位置,动态调整 `div` 的 `top`, `bottom`, `left`, `right` 属性。 - 对于居中的情况,使用 `transform: translate(-50%, -50%)` 来实现精确居中。 --- ### 效果 - 点击“居中”按钮时,`div` 会位于屏幕中心。 - 点击“左下”按钮时,`div` 会贴着屏幕左下角。 - 点击“左上”按钮时,`div` 会贴着屏幕左上角。 - 点击“右上”按钮时,`div` 会贴着屏幕右上角。 - 点击“右下”按钮时,`div` 会贴着屏幕右下角。 这种方案既灵活又易于扩展,适用于多种场景。
上一篇:
JS关闭网页的几种方法
下一篇:
JavaScript验证Email
标题录入,一次不能超过6条
蝴蝶效应
T:0.004255s,M:238.89 KB
返回顶部
留言
留言
评论