使用 jQuery UI 的内联图像弹出窗口
我正在尝试一个想法。我有一段 HTML 文本，包括内嵌图像。有些图像会有（我认为所谓的）弹出窗口。也就是说，将鼠标悬停在图像上可在其左侧显示一个控制面板。将来控制面板将切换显示模式、更改图像大小等。现在，我只想让它出现。当鼠标离开图像或控制面板时消失。
jQuery UI 有方便的“position”函数，它几乎完全符合我的要求。
当我在 Safari 5.0.1 上使用它时，它第一次可以工作，但随后的鼠标悬停会导致控制面板逐渐移动，看起来是相同的增量。看起来，当我期望它到达固定/静态位置时，position() 每次都会向面板应用一个偏移量。
当我在 Firefox 3.6.7 上使用它时，图像和控制面板之间有 1 像素的间隙。我希望img和div完美对齐，我认为这是位置点。
我需要做什么才能让它每次都到达正确的位置？而且，这种技术是否称为“flyout”、“flyover”或其他术语？
这是我的代码
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<style>
.flyover {
border: 1px solid green;
position: absolute;
display: none;
}
img {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="flyover">*</div>
<P>Here is an image
<img width=30 height=30 src="http://www.dalkescientific.com/writings/diary/alcohol_terse.png">
Mouse over to get the flyover.
</P>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script>
var is_shown = 0;
var check_for_close = function () {
if (!is_shown) {
$(".flyover").hide();
}
};
// Don't check right away because the mouse might have
// moved from the image to the flyover or vice versa
var check_exit = function () {
is_shown = 0;
setTimeout(check_for_close, 0.0);
};
$(document).ready(function () {
$("img").mouseenter(function() {
$(".flyover").position({my: "right top",
at: "left top",
of: $("img")});
$(".flyover").show();
is_shown = 1;
}).mouseleave(check_exit);
$(".flyover").mouseenter(function() {
is_shown = 1;
}).mouseleave(check_exit);
});
</script>
</body> </html>
I am experimenting with an idea. I have a block of HTML text, including inline images. Some of the images will have (what I think are called) flyouts. That is, hover over the image to bring up a control panel to its left. In the future the control panel will toggle display mode, change image size, etc. For now, I just want it to appear. And to disappear when the mouse leaves either the image or the control panel.
jQuery UI has the handy "position" function which does almost exactly what I want.
When I use it on Safari 5.0.1, it works the first time but subsequent mouseovers cause the control panel to be increasingly shifted by what looks to be the same delta. It looks like position() applies an offset each time to the panel, when I expected it to go to a fixed/static position.
When I use it on Firefox 3.6.7 there's a 1 pixel gap between the image and the control panel. I want the img and the div to be perfectly aligned, which I thought was the point of position.
What do I need to do to make it go to the right position every time? And, is this technique called a "flyout", "flyover" or some other term?
Here is my code
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<style>
.flyover {
border: 1px solid green;
position: absolute;
display: none;
}
img {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="flyover">*</div>
<P>Here is an image
<img width=30 height=30 src="http://www.dalkescientific.com/writings/diary/alcohol_terse.png">
Mouse over to get the flyover.
</P>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script>
var is_shown = 0;
var check_for_close = function () {
if (!is_shown) {
$(".flyover").hide();
}
};
// Don't check right away because the mouse might have
// moved from the image to the flyover or vice versa
var check_exit = function () {
is_shown = 0;
setTimeout(check_for_close, 0.0);
};
$(document).ready(function () {
$("img").mouseenter(function() {
$(".flyover").position({my: "right top",
at: "left top",
of: $("img")});
$(".flyover").show();
is_shown = 1;
}).mouseleave(check_exit);
$(".flyover").mouseenter(function() {
is_shown = 1;
}).mouseleave(check_exit);
});
</script>
</body> </html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我发现 jquery 论坛线程 这表明这是“jQuery 中的错误”核心已被修复，但尚未发布”。我有一个解决 Safari 问题的方法，即使用 nmyvision 的注释，并在每次调用位置之前重置位置，就像
我在 Firefox 中仍然偏离一个像素一样，但我会通过其他方式解决这个问题。
I found a jquery forum thread which suggests that this is a "bug in jQuery core that has already been fixed, but not released". I have a workaround for the Safari problem, which is to use nmyvision's comment and reset the position each time before calling position, as in
I'm still off by a pixel in Firefox but I'll work around that some other way.