使用 JavaScript 实现鼠标悬停图片时动态改变 Div 背景

本文将介绍如何使用 JavaScript 实现当鼠标悬停在不同的图片元素上时，动态改变一个 div 元素的背景图片。通过监听 `mouseover` 事件并获取当前悬停图片的 `src` 属性，我们可以轻松地更新 div 的背景样式，从而实现交互式的用户体验。

实现原理

核心思路是利用 JavaScript 的事件监听机制，监听图片元素的 mouseover (鼠标悬停) 和 mouseout (鼠标移出) 事件。当 mouseover 事件触发时，获取当前图片的 src 属性，并将其设置为目标 div 元素的 backgroundImage 样式。当 mouseout 事件触发时，可以恢复 div 元素的原始背景或者设置为其他默认背景。

HTML 结构

首先，我们需要定义一个 div 元素，用于显示背景图片，以及多个 img 元素，用户可以通过悬停这些图片来改变 div 的背景。

    Hover over an image below to display here.


@@##@@

@@##@@

@@##@@

在上面的代码中，我们为每个 img 元素添加了 onmouseover 和 onmouseout 属性，分别绑定了 upDate(this) 和 unDo() JavaScript 函数。 this 关键字会将当前 img 元素作为参数传递给 upDate 函数。

立即学习“Java免费学习笔记（深入）”；

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现背景图片的动态更新。

百度智能云·曦灵

百度旗下的AI数字人平台

下载

function upDate(previewPic){
    document.getElementById("image").style.backgroundImage = `url('${previewPic.src}')`;
}

function unDo() {
    document.getElementById("image").style.backgroundImage = "none"; // 移除背景图片
    document.getElementById("image").innerHTML = "Hover over an image below to display here."; // 恢复默认文字
}

upDate 函数接收一个 previewPic 参数，该参数代表当前鼠标悬停的 img 元素。 我们使用 previewPic.src 获取图片的 URL，并将其设置为 id 为 "image" 的 div 元素的 backgroundImage 样式。 使用模板字符串（template literals）可以更方便地构建 URL 字符串。

unDo 函数用于处理鼠标移出图片的情况。 在这里，我们将 div 的 backgroundImage 设置为 "none"，从而移除背景图片，并将 div 里面的文字恢复为初始状态。

完整代码示例

将 HTML 和 JavaScript 代码整合在一起，得到完整的示例代码：

    Hover over an image below to display here.


@@##@@

@@##@@

@@##@@

注意事项

• 图片路径： 确保图片路径正确，否则背景图片可能无法显示。
• CSS 样式： 可以通过 CSS 样式来调整 div 元素的背景图片显示方式，例如 background-size、background-repeat 等。
• 性能优化： 如果图片数量很多，可以考虑使用事件委托来提高性能。
• 用户体验： 可以添加过渡效果，使背景图片的切换更加平滑。

总结

通过本文的介绍，你学会了如何使用 JavaScript 实现鼠标悬停图片时动态改变 div 背景的功能。 这种技术可以应用于各种场景，例如产品展示、图片预览等，为用户提供更丰富的交互体验。 掌握了这种方法，你就可以根据自己的需求，灵活地定制网页的交互效果。