html实现鼠标悬停换图片的JS实现代码

好的，关于换图片的效果，可以通过以下代码实现：

// html
<img src="1.jpg" onmouseover="this.src='2.jpg'" onmouseout="this.src='1.jpg'">

// js
var img = document.querySelector('img');
img.onmouseover = function() {
    img.src = '2.jpg';
}
img.onmouseout = function() {
    img.src = '1.jpg';
}

希望这能帮到您！

相关问题

如何实现鼠标悬停图片放大的效果。

实现鼠标悬停图片放大的效果，可以通过以下几种方式：

1. 使用CSS transform属性

可以使用CSS的transform属性来实现图片放大效果。将图片的缩放比例设为1.2或其他比例，当鼠标悬停在图片上时，将缩放比例改为1或原来的比例。

示例代码：

<style>
    .img-zoom {
        transition: transform .2s;
    }
    .img-zoom:hover {
        transform: scale(1.2);
    }
</style>

<img src="image.jpg" class="img-zoom">

2. 使用JavaScript和CSS

通过JavaScript来改变图片的样式，实现图片放大效果。当鼠标悬停在图片上时，将图片的宽高增加一定比例，当鼠标移开时，将图片宽高恢复到原来的大小。

示例代码：

<style>
    .img-zoom {
        transition: width .2s, height .2s;
    }
</style>

<img src="image.jpg" class="img-zoom" onmouseover="zoomIn(this)" onmouseout="zoomOut(this)">

<script>
    function zoomIn(img) {
        img.style.width = (img.clientWidth * 1.2) + "px";
        img.style.height = (img.clientHeight * 1.2) + "px";
    }
    function zoomOut(img) {
        img.style.width = "";
        img.style.height = "";
    }
</script>

3. 使用jQuery插件

可以使用一些开源的jQuery插件来实现图片放大效果，比如zoom.js、fancybox等。

使用zoom.js实现图片放大效果的示例代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>

<img src="image.jpg" data-zoom-image="image-large.jpg">

<script>
    $('img').zoom();
</script>

以上是实现鼠标悬停图片放大的几种方式，可以根据实际需求选择适合的方法。

鼠标悬停显示图片 js

鼠标悬停显示图片是一种常见的网页效果，可以通过JavaScript实现。一般的做法是，在HTML中通过<img>标签定义图片，然后使用JavaScript获取到该图片元素，并添加一个事件监听器，当鼠标悬停在该图片上时，显示一个包含该图片的元素（例如一个<div>）。

以下是一个简单的示例代码：

HTML:

<img src="image.jpg" id="img1">
<div id="img-container"></div>

JavaScript:

var img = document.getElementById("img1");
var container = document.getElementById("img-container");

img.addEventListener("mouseover", function() {
  container.style.backgroundImage = "url('image.jpg')";
  container.style.display = "block";
});

img.addEventListener("mouseout", function() {
  container.style.display = "none";
});

上述代码中，当鼠标悬停在id为"img1"的图片上时，会将包含该图片的<div>元素的背景图设置为该图片，并显示该元素；当鼠标移出图片时，隐藏该元素。