gpt4 book ai didi

javascript - 使用javascript在鼠标悬停时查看内容顶部的放大图像

转载 作者:太空宇宙 更新时间:2023-11-04 10:47:15 25 4
gpt4 key购买 nike

我正在尝试使用 javascript 在鼠标悬停时显示我的图像的放大版本。我的功能正常,但显示属性不正确,我需要将图像显示在页面内容之上,即像弹出窗口一样。

我如何将其添加到我的代码中。我遇到的问题是我的页面分为几列,因此图像受到列宽的限制,所以我需要一种方法来覆盖它,即使用弹出窗口。

DEMO - js fiddle

html:

<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>

JavaScript:

function bigImg() {
$("#test1").show();
}

function normalImg() {
$("#test1").hide();
}

最佳答案

使用特定元素 (ID) 对脚本进行编码会受到限制。建议您改用元素类。

您可以通过多种方式实现您想要的效果,这里是对大图像使用绝对定位的一种方式:

$('.small-image').on('mouseenter', function(e) {
$(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
$(this).siblings('.big-image').hide();
})
body {
overflow-x: hidden;
}
.row::after {
content: ' ';
display: block;
clear: both;
}
.column {
float: left;
}
.column1 {
width: 20%;
}
.column2 {
width: 80%;
}

img {
max-width: 100%;
height: auto;
display: block;
}

.enlarge {
position: relative;
}

.big-image {
display: none;
position: absolute;
left: 100%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column column1">
<div class="enlarge">
<img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
<div class="big-image">
<img src="http://lorempixel.com/400/300/" alt="" />
</div>
</div>
</div>
<div class="column column2">
A LOT OF TEXT IN HERE
</div>
</div>

也在 Fiddle .

关于javascript - 使用javascript在鼠标悬停时查看内容顶部的放大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35292999/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com