HTML滑过小图显示大图,jquery实现鼠标滑过小图查看大图的方法
时间: 2023-10-27 10:28:33 浏览: 43
可以使用jQuery的hover()方法和attr()方法来实现鼠标滑过小图查看大图的效果。具体实现方法如下:
HTML代码:
```html
<div class="img-container">
<img src="small.jpg" alt="small image">
<div class="img-overlay">
<img src="large.jpg" alt="large image">
</div>
</div>
```
CSS代码:
```css
.img-container {
position: relative;
display: inline-block;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.img-overlay img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.img-container:hover .img-overlay {
opacity: 1;
}
```
jQuery代码:
```javascript
$(document).ready(function() {
$('.img-container').hover(function() {
var imgSrc = $(this).find('img').attr('src');
$(this).find('.img-overlay img').attr('src', imgSrc.replace('small', 'large'));
});
});
```
这段代码会在页面加载完成后执行,当鼠标滑过img-container时,会获取小图的src属性,并将大图的src属性替换为小图src属性中的"small"部分替换为"large",从而显示对应的大图。同时,img-overlay元素的opacity属性会从0变为1,实现了鼠标滑过小图查看大图的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)