停止js图像弹出屏幕

使用下面的代码，我怎么能阻止它脱离屏幕？如果浏览器窗口最右侧有一个图像，代码将向右扩展图像，所以现在扩展后的图像将不在屏幕上。我希望它加载到左侧，如果它想要加载屏幕（向右）。我希望这是有道理的。我想在浏览器窗口中“包含”弹出窗口 - 更具体地说，它需要包含到#page_container（包装整个页面）停止js图像弹出屏幕

我不确定原始代码来自哪里，但im试图修改它。

任何帮助表示赞赏。

this.screenshotPreview = function(){  

    xOffset = 10; 
    yOffset = -10; 

$("a.screenshot").hover(function(e){ 
    this.t = this.title; 
    this.title = "";  
    var c = (this.t != "") ? "<br/>" + this.t : ""; 
    $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='preview'/>"+ c +"</p>");         
    $("#screenshot") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px") 
     .fadeIn("fast");       
}, 
function(){ 
    this.title = this.t;  
    $("#screenshot").remove(); 
}); 
$("a.screenshot").mousemove(function(e){ 
    $("#screenshot") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px"); 
});   
};

这里是小提琴

http://jsfiddle.net/63HA4/

来源

2012-09-21 user1687698

提出了一个演示中jsfiddle.net – Rufus

能否请您提供适用于#screenshot的CSS（或提琴鲁弗斯问），因为这可能会在这里是关键。 – Zappa

我在原帖中加了一个小提琴 – user1687698

首先你是混合的“Y偏移”可能不是你想要什么的“X”属性。三重检查。

改变你的鼠标移动方法，这样的事情，请注意我加入，看看未来的地位正负面检查（从父容器的）

$("a.screenshot").mousemove(function(e){ 
    var x = (e.pageY - xOffset < 0)? 0: e.pageY - xOffset, 
     y = (e.pageY + yOffset < 0)? 0: e.pageX + yOffset; 
    $("#screenshot") 
    .css("top",y + "px") 
    .css("left",x + "px");

话又说回来，检查数学，这不是最终的代码，但它会让你知道你需要做什么

来源

2012-09-21 03:51:31 ravenlp

我试了几件东西，但没有好的代码呢 – user1687698

这是我实施的解决方案，它适用于我。

this.screenshotPreview = function(){  

xOffset = -10; 
yOffset = -10; 

$("a.screenshot").hover(function(e){ 
    this.t = this.title; 
    this.title = "";  
    var c = (this.t != "") ? "<br/>" + this.t : ""; 
    $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='preview'/>"+ c +"</p>");         
    $("#screenshot") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px") 
     .fadeIn("fast");       
}, 
function(){ 
    this.title = this.t;  
    $("#screenshot").remove(); 
}); 
$("a.screenshot").mousemove(function(e){ 
    var _width = jQuery('#screenshot').outerWidth(), 
    _outerWidth = document.body.offsetWidth; 

    var x = e.pageX + yOffset; 
    if(x >(_outerWidth - _width)){ 
     x = _outerWidth - _width; 
    } 

    $("#screenshot") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(x) + "px"); 
});   
};

来源

2014-10-28 15:57:55

停止js图像弹出屏幕

回答

相关问题