JQuery悬停在小图上方,显示大图,显示和隐藏方式
时间: 2023-09-08 20:12:14 浏览: 48
您可以使用JQuery的hover()方法来实现鼠标悬停在小图上方时显示大图,离开小图时隐藏大图的效果。具体的实现可以参考下面的代码:
HTML代码:
```html
<div class="small-img">
<img src="small-img.jpg" alt="Small Image">
</div>
<div class="big-img">
<img src="big-img.jpg" alt="Big Image">
</div>
```
CSS代码:
```css
.big-img {
display: none;
}
```
JQuery代码:
```javascript
$(document).ready(function() {
$('.small-img').hover(
function() {
$('.big-img').fadeIn();
},
function() {
$('.big-img').fadeOut();
}
);
});
```
在上面的代码中,我们首先使用CSS将大图的显示设置为none,即默认情况下不显示。然后使用JQuery的hover()方法来监听小图的鼠标悬停事件和鼠标离开事件,分别在这两个事件中使用fadeIn()和fadeOut()方法来显示和隐藏大图。当鼠标悬停在小图上方时,大图会渐渐地显示出来;当鼠标离开小图时,大图会渐渐地隐藏起来。
相关问题
jquery鼠标悬停显示图片
可以通过jquery的hover()方法来实现鼠标悬停显示图片的效果。具体实现步骤如下:
1. 在HTML中添加图片元素和要显示图片的元素。例如:
```html
<img src="placeholder.png" alt="图片占位符" class="img-placeholder">
<div class="img-container">
<img src="image.jpg" alt="图片">
</div>
```
2. 使用CSS隐藏要显示的图片元素。例如:
```css
.img-container {
display: none;
}
```
3. 使用jQuery的hover()方法监听鼠标移入和移出事件,控制要显示的图片元素的显示和隐藏。例如:
```javascript
$(document).ready(function() {
$('.img-placeholder').hover(function() {
$('.img-container').show();
}, function() {
$('.img-container').hide();
});
});
```
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery鼠标悬停显示图片</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
.img-container {
display: none;
}
</style>
</head>
<body>
<img src="placeholder.png" alt="图片占位符" class="img-placeholder">
<div class="img-container">
<img src="image.jpg" alt="图片">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.img-placeholder').hover(function() {
$('.img-container').show();
}, function() {
$('.img-container').hide();
});
});
</script>
</body>
</html>
```
jquery鼠标悬停图片放大
您可以使用jQuery的hover()事件和animate()方法来实现鼠标悬停图片放大的效果。具体实现步骤如下:
1. 首先,为图片添加一个CSS类,设置初始大小和过渡效果:
```css
.img-hover {
transition: all 0.3s ease-in-out; /* 过渡效果 */
transform: scale(1); /* 初始大小 */
}
```
2. 然后,在jQuery中,使用hover()事件监听鼠标悬停和移出事件,并使用animate()方法改变图片的大小:
```javascript
$('.img-hover').hover(
function() {
$(this).animate({
transform: 'scale(1.2)' // 放大到1.2倍
}, 300);
},
function() {
$(this).animate({
transform: 'scale(1)' // 恢复到初始大小
}, 300);
}
);
```
这样,当鼠标悬停在图片上时,图片会缓慢放大到1.2倍,当鼠标移出时,图片会缓慢恢复到初始大小。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)