Question

当您将鼠标悬停在链接上时，我正在使用一些jQuery来显示div弹出窗口。但是当链接太靠近浏览器窗口的右侧并且弹出窗口的内容不可见时，就会出现问题。

我在这里用相同的jQuery代码做了一个例子：

我相信一个if语句可以解决问题，一些伪代码：

if(element is out of boundaries){
    moveleft=-400;
}

我只需要将div移动到左边，走出界限到底部不会有问题，带有悬停触发器的链接在页面上不会太低

Answer 1

尝试使用此JS代码：

jQuery(function() {
  var moveLeft = 20;
  var moveDown = 10;

  jQuery('.box').hover(function(e) {

   if (e.pageX+jQuery('div.hidden').width() > jQuery(document).width()) {
      moveLeft = -20 - jQuery('div.hidden').width();
   }
   else
   {
       moveLeft = 20;
   }

    jQuery('div.hidden').show();
  }, function() {
    jQuery('div.hidden').hide();
  });

  jQuery('.box').mousemove(function(e) {
    jQuery("div.hidden").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});

http://codepen.io/anon/pen/XJJQRM

Answer 2

您可以检查工具提示的位置，添加它的尺寸，并将其与视口的大小进行比较。在这种情况下窗口。

http://codepen.io/anon/pen/myygmQ

jQuery(function() {
  var moveLeft = 20;
  var moveDown = 10;

  jQuery('.box').hover(function(e) {
    jQuery('div.hidden').show();
  }, function() {
    jQuery('div.hidden').hide();
  });

  jQuery('.box').mousemove(function(e) {
    var newY = e.pageY + moveDown;
    var newX = e.pageX + moveLeft;
    var yOver = (newY + $('.hidden').height()) - $(window).height();
    var xOver = (newX + $('.hidden').width()) - $(window).width();
    if(yOver > 0) newY -= yOver;
    if(xOver > 0) newX -= xOver;
    jQuery("div.hidden").css({top: newY, left: newX});
  });

});

.box{
  width:200px;
  height:100px;
  background-color:gray;
}

.mid{
  float:none;
  margin:0 auto;
}

.right{
  float: right;
}

.box.hidden{
  height: auto;
  position: absolute;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box left">
  <p>I am a regular box with a <a href="javascript:;">link</a></p>
</div>

<div class="box mid">
  <p>I am a regular box with a <a href="javascript:;">link</a></p>
</div>

<div class="box right">
  <p>I am a regular box with a <a href="javascript:;">link</a></p>
</div>

<div class="box hidden">
  <p>I am a hidden box with some content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, laudantium accusamus magnam id molestias tempore excepturi molestiae repellat voluptatum sunt aspernatur ab, voluptates officiis rerum amet similique, libero ea a.</p>
</div>

如何检测div是否超出页面边界？

2 个答案: