Question

我正在尝试实现jquery图像悬停弹出窗口但面临一个问题，当弹出窗口更接近浏览器边缘时，它超出了它的边缘我希望它在发现空间不足以显示该弹出窗口时改变其方向，我在许多插件中看到这种效果，如果弹出窗口，工具提示和下拉菜单靠近浏览器窗口边缘，它们会改变方向

任何人都可以指导我正确的方向 此处是参考的屏幕截图 http://img512.imageshack.us/img512/4990/browseredge.png

这里是jquery悬停代码

function imagePreview(){ 
 /* CONFIG */

  xOffset = 10;
  yOffset = 30;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

 /* END CONFIG */
 $("a.preview").hover(function(e){
  this.t = this.title;
  this.title = ""; 
  var c = (this.t != "") ? "<br>" + this.t : "";
  var newName = this.name;
  //console.log(this.name);
  newName=newName.replace("/l/","/o/");
  //console.log(newName);
  $("body").append("<p id='preview'><img src='"+ this.name +"' alt='Image preview' style='margin-bottom:5px;'>"+ c +"</p>");
  $("#preview img").error(function () {
   $("#preview img").attr("src" ,newName).css({'width': '400px', 'height': 'auto'});
  });

  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast");      
    },
 function(){
  this.title = this.t; 
  $("#preview").remove();
    }); 
 $("a.preview").mousemove(function(e){
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
 });   
};

任何帮助都会受到欢迎

由于

萨勒曼

Answer 1

你的提取有点臃肿与其他不相关的代码/很长时间让我花太多时间看它，但理解你的问题我想我写的代码片段处理一个巨大的下拉导航和确保它永远不会离开屏幕可能会帮助你。

function resize() {
  var viewportWidth = window.innerWidth ? window.innerWidth : $(window).width();

  if (jQuery.browser.msie) {
    if(parseInt(jQuery.browser.version) == 7) {
      viewportWidth -= 3;
    }
  }

  $('ul#nav .sub').each(function() {
    $(this).css({'display': 'block', 'left': ''});
    var offset = $(this).offset().left + $(this).outerWidth(true) + 10;

    if(offset > viewportWidth) {
      ie6offset = $.browser.msie && $.browser.version.substr(0,1)<7 ? 30 : 0;
      $(this).css({
        'left': -(offset + 10 - viewportWidth) - ie6offset
      });
    }
  });
}

总之，该函数计算.sub右边缘的真实偏移量。然后考虑浏览器的不一致性，检查偏移视口宽度的情况。如果偏移量大于视口的宽度，则必须设置负左值以使元素保持在屏幕上。

jquery图像悬停弹出窗口无法检测浏览器边缘并改变其方向

1 个答案: