1

以下のコードを使用して、画面から消えないようにするにはどうすればよいですか? ブラウザー ウィンドウの右端に画像がある場合、コードは画像を右に拡大するため、拡大した画像は画面からはみ出します。画面から（右に）ロードしたい場合は、左にロードしたいと思います。それが理にかなっていることを願っています。ブラウザ ウィンドウ内にポップアップを「格納」したいと考えています。より具体的には、#page_container (ページ全体をラップする) に格納する必要があります。

元のコードがどこから来たのかはわかりませんが、変更しようとしています。

どんな助けでも大歓迎です。 

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/

4

2 に答える 2

0

これが私が実装した解決策です。それは私にとってはうまくいきます。

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-28T15:57:55.927 に答える
0

まず、「x」プロパティと「yOffset」を混在させていますが、これはおそらく意図したものではありません。トリプルチェックしてください。

このようなものに合わせて mousemove メソッドを変更してください。将来の位置が（親コンテナから）負になるかどうかを確認するために追加するチェックに注意してください。

$("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-21T03:51:31.790 に答える