jquery - ホバー時に大きな画像を表示し、ビューポート内にとどまる

Question

それで、私が望むことを正確に行うこのスクリプトを見つけましたhttp://cssglobe.com/lab/tooltip/02/ ( http://cssglobe.com/easiest-tooltip-and-image-preview-usingのホームページからダウンロード) -jquery/ ) 唯一の問題は、画像が大きすぎるか、ブラウザーの端にサムネイルがある場合、ブラウザー (ここで見つけたビューポート) に大きな画像が完全に表示されないことです。いくつかの検索の後、私はそれを変更しましたが、それでもホバーするとビューポートの外側に表示されることがあり、マウスを移動した後、大きな画像が正しく再配置されます。元のjs

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
        $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#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");
    });         
};

// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

ホバーとマウスムーブを変更して、このバージョンを作成しました

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 20;
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
    $(".preview").hover(function(kmouse){
        this.t = this.title;
        this.title = "";
        src=this.src;   
        if($(this).data("imgmode")=='1') 
        {
            src=src.replace("/thumbs",""); 
        }
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ src +"' alt='Image preview' />"+ c +"</p>");                              

    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    }); 
    $(".preview"). mousemove(function(kmouse){ 
    var border_top = $(window).scrollTop(); 
    var border_right = $(window).width(); 
    var left_pos; var top_pos; var offset = 15; 
    if(border_right - (offset *2) >= $("#preview").width() + kmouse.pageX){ left_pos = kmouse.pageX+offset; } else{ left_pos = border_right-$("#preview").width()-offset; } if(border_top + (offset *2)>= kmouse.pageY - $("#preview").height()){ top_pos = border_top +offset; } else{ top_pos = kmouse.pageY-$("#preview").height()-offset; } $("#preview").css({left:left_pos, top:top_pos}).fadeIn("fast");
    }); 

};
$(document).ready(function(){
    imagePreview();
});

ご覧のとおり、クラス プレビューを使用してすべての要素を調整するなど、その他のマイナーな変更を行ったほか、カスタム HTML5 タグ data-imgmode を追加しましたが、この問題ではサイトの要求を満たすためだけに役割を果たしません。

ここでの最初の投稿、まだ js/jQuery の初心者ですが、必要なすべての情報を皆さんに提供できれば幸いです :)