onepiece图片：鼠标移动到特定模块时弹出小窗口，小窗口内可以显示图片等元素 2024-05-06 21:46:54 0 0 鼠标移动到特定模块时弹出小窗口，小窗口内可以显示图片等元素<!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> .father { position: relative; height: 60px; width: 200px; border: 2px solid red; display: inline-block; } /* 设置小窗口格式 */ .popup { display: none; /* 样式设置 */ position: absolute; padding: 0px; background-color: white; width: 500px; height: 500px; }</style><script> document.addEventListener('DOMContentLoaded', function () { var trigger = document.querySelector('.popup-trigger'); var popup = document.querySelector('.popup'); trigger.addEventListener('mousemove', function (event) { popup.style.display = 'block'; // 设置弹出窗口的位置 popup.style.left = event.clientX + 'px'; popup.style.top = event.clientY + 'px'; }); trigger.addEventListener('mouseout', function () { popup.style.display = 'none'; }); });</script><body> <div class="father"> <span class="popup-trigger">我一定要成为海贼王</span> <div class="popup"> <p>大航海时代是由于罗杰最后的一句话“想要我的财宝吗，我把它都放在那了，想要就去那吧！”开启的，随后人们就开始涌向大海了。那个财宝就是onepiece，地点就是 最终之岛拉夫特尔。</p> <img src="onepiece.jpg"> </div> </div></body></html> 这是一个基本的 HTML 文件，其中包含了一个触发弹出窗口的父元素和一个弹出窗口。 当鼠标在触发器上移动时，弹出窗口显示在鼠标位置。当鼠标移出触发器时，弹出窗口隐藏起来。 在该代码中，我们使用了一些基本的 HTML 元素和 CSS 样式，也使用了 JavaScript 代码来处理事件。 HTML 部分：<div class="father">：包含了触发器和弹出窗口的父元素。<span class="popup-trigger">：触发器元素，当鼠标在其上移动时，触发弹出窗口显示。<div class="popup">：弹出窗口元素，显示额外的内容。 CSS 部分：.father 和 .popup 类选择器定义了父元素和弹出窗口的样式。 JavaScript 部分：document.addEventListener('DOMContentLoaded', function () { ... });：在文档加载完成后执行的 JavaScript 代码。var trigger = document.querySelector('.popup-trigger');：获取触发器元素。var popup = document.querySelector('.popup');：获取弹出窗口元素。trigger.addEventListener('mousemove', function (event) { ... });：为触发器添加鼠标移动事件监听器。trigger.addEventListener('mouseout', function () { ... });：为触发器添加鼠标移出事件监听器。 请注意：这段代码中的图片路径 “onepiece.jpg” 需要根据实际文件位置进行更改才能正常加载图片。 效果图： });`：为触发器添加鼠标移出事件监听器。 请注意：这段代码中的图片路径 “onepiece.jpg” 需要根据实际文件位置进行更改才能正常加载图片。 效果图： 收藏（0）