停止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圖像彈出屏幕

回答

相關問題