3

所以我发现这个脚本正是我想要的http://cssglobe.com/lab/tooltip/02/（从它的主页下载http://cssglobe.com/easiest-tooltip-and-image-preview-using -jquery/）唯一的问题是，如果图像太大或浏览器边缘附近的缩略图，较大的图像不会完全显示在浏览器中（也就是我在这里找到的视口）。经过一番搜索后，我对其进行了修改，但仍处于悬停状态，它有时会显示在视口之外，然后在 mousemove 之后，较大的 img 会正确重新定位，原始 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();
});

正如您所看到的，还做了一些其他的小改动，比如为所有带有类预览的元素调整它，不仅 a 并且还添加了一个自定义 HTML5 标记 data-imgmode，尽管只是为了满足我的站点需求，它在这个问题中没有任何作用。

在这里的第一篇文章，仍然是 js/jQuery 的初学者，但希望我给了你们所有你需要的信息 :)

4

0 回答 0