Jquery ui 使用jQuery UI的内联图像弹出按钮
我正在试验一个想法。我有一块HTML文本，包括内联图像。一些图片将有（我认为是所谓的）弹出按钮。也就是说，将鼠标悬停在图像上，在其左侧显示一个控制面板。在未来的控制面板将切换显示模式，改变图像大小等，现在，我只希望它出现。当鼠标离开图像或控制面板时消失 jQueryUI有一个方便的“”函数，它几乎完全符合我的要求 当我在Safari 5.0.1上使用它时，它第一次起作用，但随后的鼠标移动会导致控制面板不断移动，看起来是相同的增量。看起来position（）每次都会将偏移应用于面板，而我希望它变为固定/静态位置 当我在Firefox 3.6.7上使用它时，图像和控制面板之间有一个1像素的间隙。我希望img和div完全对齐，我认为这是位置点 我需要做些什么才能让它每次都走到正确的位置？这种技术被称为“飞出”、“飞越”还是其他术语 这是我的密码Jquery ui 使用jQuery UI的内联图像弹出按钮,jquery-ui,position,flyout,Jquery Ui,Position,Flyout,我正在试验一个想法。我有一块HTML文本，包括内联图像。一些图片将有（我认为是所谓的）弹出按钮。也就是说，将鼠标悬停在图像上，在其左侧显示一个控制面板。在未来的控制面板将切换显示模式，改变图像大小等，现在，我只希望它出现。当鼠标离开图像或控制面板时消失 jQueryUI有一个方便的“”函数，它几乎完全符合我的要求 当我在Safari 5.0.1上使用它时，它第一次起作用，但随后的鼠标移动会导致控制面板不断移动，看起来是相同的增量。看起来position（）每次都会将偏移应用于面板，而我希望它变为
<!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>
·天桥{
边框：1px纯绿色；
位置：绝对位置；
显示：无；
}
img{
边框：1px纯蓝色；
}
*
这是一张图片
鼠标移到天桥上。
显示的var=0；
var check_for_close=函数（）{
如果（！已显示）{
$（“.flyover”）.hide（）；
}
};
//不要马上检查，因为鼠标可能会
//从图像移动到立交桥，反之亦然
var check_exit=函数（）{
所示为=0；
setTimeout（检查_是否关闭，0.0）；
};
$（文档）.ready（函数（）{
$（“img”）.mouseenter（函数（）{
$（“.flyover”）。位置（{my:“右上方”，
在“左上角”，
其中：$（“img”）}；
$（“.flyover”）.show（）；
所示为=1；
}).mouseleave（检查出口）；
$（“.flyover”）.mouseenter（函数（）{
所示为=1；
}).mouseleave（检查出口）；
});
$(...).css({left:0,top:0}).position({ ... });