Question

所以我发现这个脚本完全符合我想要的http://cssglobe.com/lab/tooltip/02/（从http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/的主页下载）唯一的问题是更大的图像没有完全显示在浏览器中（我发现的视口）这里）如果图像太大或浏览器边缘附近的缩略图。经过一些搜索，我修改了它，但仍然在悬停时有时显示在视口外，然后在鼠标移动后，更大的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();
});

正如你所看到的那样做了一些其他的小改动，比如用类预览调整所有元素不仅是一个而且还添加了一个自定义的HTML5标签data-imgmode虽然在这个问题上没有任何作用，只是为了满足我的网站需求。

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

在悬停时显示较大的图像并保持在视口内

0 个答案: