使用js+css+html实现，switch判断按键移动div效果

时间: 2024-02-03 10:01:59 浏览: 105

js+html+css实现鼠标移动div实例

在网页开发中，动态效果是提升用户体验的重要手段之一。本文将详细介绍如何使用JavaScript（JS）、HTML和CSS实现一个鼠标移动时动态改变div位置的实例。这个功能常用于拖拽元素，比如窗口、面板或者可自定义布局的组件。我们需要创建一个包含div元素的HTML结构。在提供的代码中，我们看到一个名为`divBody`的div，内部包含一个`divHead`作为拖拽区域，以及`.content`和`.tail`两个子div。`divBody`的样式设置为相对定位，这样它的位置可以通过JavaScript动态调整。`divHead`设置了`cursor: move`，当鼠标指针位于其上时，显示移动手型，提示用户可以拖动。 ```html <div class="divBody" id="divBody" style="left: 29px; top: 14px;"> <div class="divHead" id="divHead" style="cursor: move;"></div> <div class="content"></div> <div class="tail"></div> </div> ``` 接下来是CSS部分，定义了各个div的样式，包括边框、宽度、高度、背景色等。特别是`.divBody`的相对定位，以及`.divHead`的移动光标，都是实现拖拽功能的关键。 ```css .divBody { border: solid #CCC 1px; width: 500px; height: 400px; position: relative; z-index: 0; margin: 0 auto; } .divHead { width: 500px; height: 50px; background-color: #CCC; } .content { width: 500px; height: 300px; } .tail { background: #CCC; height: 50px; width: 500px; display: table-cell; vertical-align: middle; } ``` 最后是JavaScript部分，这部分代码用于监听鼠标的按下、移动和释放事件，实现div的拖动。`onmousedown`事件触发时，记录鼠标点击时div与鼠标位置的偏移量。`onmousemove`事件中，根据鼠标的移动更新div的位置。当鼠标释放(`onmouseup`)时，取消`onmousemove`监听，防止鼠标移动时div持续变化。 ```javascript var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown = function(e) { if (!e) e = window.event; // 兼容IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; }; document.onmouseup = function() { document.onmousemove = null; }; function mousemove(ev) { if (ev == null) ev = window.event; // 兼容IE fdiv.style.left = (ev.clientX - posX) + "px"; fdiv.style.top = (ev.clientY - posY) + "px"; } ``` 以上代码实现了基础的拖拽功能，但还有些细节需要注意。例如，为了兼容不同浏览器，需要处理原生事件对象(e)和IE的window.event。此外，`parseInt(fdiv.style.left)`和`parseInt(fdiv.style.top)`用于获取div当前的left和top值，因为这些值通常带有单位，需要转换成整数进行计算。实际应用中可能需要对边界进行限制，防止div移出可视区域。这个实例展示了JavaScript与HTML、CSS协同工作的基本原理，通过结合DOM操作、事件监听和样式修改，可以实现丰富的交互效果。同时，这也是前端开发中常用的一种技术，理解并掌握它有助于提升你的前端技能。

好的，以下是一个使用 JS + CSS + HTML 实现按键移动 DIV 的示例代码。代码中使用了 `switch` 结构来判断按下的键位，并根据不同的键位实现 DIV 的移动效果。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按键移动 DIV</title> <style> #box { width: 100px; height: 100px; background-color: #f00; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div id="box"></div> <script> var box = document.getElementById("box"); document.addEventListener("keydown", function(event) { switch (event.keyCode) { case 37: // 左箭头 box.style.left = parseInt(box.style.left) - 10 + "px"; break; case 38: // 上箭头 box.style.top = parseInt(box.style.top) - 10 + "px"; break; case 39: // 右箭头 box.style.left = parseInt(box.style.left) + 10 + "px"; break; case 40: // 下箭头 box.style.top = parseInt(box.style.top) + 10 + "px"; break; } }); </script> </body> </html> ``` 在这个示例中，我们首先定义了一个 ID 为 `box` 的 DIV 元素，并使用 CSS 设置其样式，使其在页面中水平垂直居中。然后，我们通过 JS 获取这个 DIV 元素，并使用 `addEventListener` 方法监听 `keydown` 事件。当用户按下键盘上的箭头键时，JS 会根据按下的键位执行不同的操作，来实现 DIV 的移动效果。需要注意的是，在这个示例中，我们使用了 `parseInt` 方法将 DIV 元素的 `top` 和 `left` 属性转换为整数类型，以便在移动时进行加减运算。同时，我们还使用了 `transform: translate(-50%, -50%)` 属性来使 DIV 元素在其父级容器中水平垂直居中，这样在移动时才能准确地计算其位置。

阅读全文

使用js+css+html实现，switch判断按键移动div效果

相关推荐

js+html+css实现鼠标移动div实例.docx

移动div+改变div大小+右键添加新的div+div只能在一个范围的。。JQ+js+html源码。。

使用js+css+html实现，按键移动div 效果

js实现键盘控制DIV移动的方法

原生js实现键盘控制div移动且解决停顿问题

JavaScript利用键盘码控制div移动

jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

javascript移动的盒子效果代码

crazyTank:通过键盘按键演示移动DOM对象

javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

javascript利用键盘控制小方块的移动

【JavaScript源代码】JavaScript实现经典贪吃蛇游戏.docx

【JavaScript源代码】JavaScript贪吃蛇的实现代码.docx

js键盘事件实现人物的行走

jQuery mobile开关式按键

原生js实现的贪吃蛇网页版游戏完整实例

精通JavaScript

精通javascript

使用JavaScript实现键盘控制div移动

最新推荐

利用js+css+html实现固定table的列头不动

使用JS+CSS实现DIV层自适应高度和宽度

html+css实现数据图表的展示效果

html+css制作div标签增加右上角删除图标的示例代码

JS+CSS实现闪烁字体效果代码

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具