javascript - 在光标处显示 div 并将 div 保持在可视区域内

Question

将鼠标悬停在附加到照片的超链接上时，我让 div 加载页面，但是如果照片离可视屏幕区域太近，则 div 将被切断，您必须滚动才能看到它。如何偏移 div 以使整个 div 显示在可视区域内？另外，当鼠标在照片上移动时，我希望 div 与鼠标一起移动，但这并没有发生。

<script type="text/javascript">
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX; 
mouseY = e.pageY;
});  
$(".ttip").mouseover(function(){
$('#meminfotip').css({'top':mouseY,'left':mouseX}).show().load('blah.php?id='+this.id);
});

$('.ttip').mouseout(function(){
$('#meminfotip').hide();
});
</script>

<a class="ttip" id="1" href="blahh.php?id=1>"><img src="images/blah.jpg" /></a>

<div id="meminfotip" style="display:none;z-index:999999;position:absolute;"></div>

Answer 1

您可以使用 jquery UI position方法：

$('.ttip').mousemove(function (ev) {
 $("#meminfotip").position({
    my: "left bottom",
    of: ev,
    offset: "3 -3",
    collision: "fit"
  });
});