javascript - 悬停方向上的图像预览是否感知？

Question

我需要一些帮助:)

在作品集网站上工作，当您将鼠标悬停在作品集标题上时，可以预览图像。每当我将鼠标悬停在页面底部的最后几个标题上时，都会出现一些丑陋的故障/弹跳:图像超出了网页的范围。有没有办法让它感知方向，以便当您将鼠标悬停在最后几个标题上时，图像预览显示在标题上方而不是下方？

HTML:

<ul class="project-list">
    <li>
        <a href="" rel="https://dummyimage.com/600x400/000/fff" class="preview" title="" target="_self">Title Here</a>
    </li>
</ul>

CSS:

#preview {
    position: absolute;
    display: none;
    max-width: 50rem;
    height: auto;
}

JS:

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

// Configuration of the x and y offsets
this.imagePreview = function(){ 
        xOffset = -30;
        yOffset = 40;   

    var imgHeight = 0;
    var distFromTop = 0;
    var mainImgTop = $(".preview").position();  

    $(".preview").hover(function(e){
        this.t = this.title;
        this.title = "";

        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img style='display:block;' src='"+ this.rel +"' alt='Image prev' />");

        $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("slow");
    },

    function(){
        this.title = this.t;
        $("#preview").remove();
    });

    $(".preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

这是一个 JSFiddle:https://jsfiddle.net/spacebot/b7h46cfh/

Answer 1

如果您只想显示最后 X 个标题上方的图像，可以使用 :nth-last-child(-n+X)(其中 X 是标题数量)。

检查标题是否是最后一个标题之一，然后运行另一个动画来显示上面的图像。

//If link is one of the last 3 childs, open above
if($(this).is(':nth-last-child(-n+3)')){ 
    openAbove();
}

JSFiddle 示例:

https://jsfiddle.net/447pjobL/8/