Question

我正在构建一个停靠式菜单。我底部有4个缩略图，我想弹出一个div。一切都很好，除了一件事，当我试图将弹出div放在缩略图上方时，我无法弄清楚如何获得图像的位置。我尝试了偏移和$（元素）.width但两者都返回底部（主）div（包含缩略图）的位置。我该怎么办？

Bottom Div

<div id=menu>
    <a href="http://www.google.com">
        <img id="fest" src="icon/fest.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
    <img id="music" src="icon/music.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
        <img id="diaf" src="icon/diaf.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
        <img id="show" src="icon/show.png" style="position: relative;"height="150"/>
    </a>
</div>

弹出式div

<div id="diaf_div" style="display: none; background-color: rgba(50, 50, 50, 0.5); border-radius: 25px; border: 2px;">
    <a href="http://www.google.com">
        <img id="diaf_1" src="icon/diafora/apokries.png" style=" height: 80px; width: 80px;" title="Αποκριάτικες Εκδηλώσεις"/>
    </a></br>
    <a href="http://www.facebook.com">
        <img id="diaf_2" src="icon/diafora/docs.png" style=" height: 80px; width: 80px;" title="Aegean Docs"/>
    </a></br>
    <a href="http://www.hiddenlol.com">
        <img id="diaf_3" src="icon/diafora/grad.png" style=" height: 80px; width: 80px;" title="Ορκομωσίες"/>
    </a></br>
    <a href="http://www.hiddenlol.com">
        <img id="diaf_4" src="icon/diafora/valentine.png" style=" height: 80px; width: 80px;" title="Εκδήλωση Αγίου Βαλεντίνου"/>
    </a></br>
</div>

和缩略图javascript

//Menu      
var myElement = document.getElementById('diaf');
var position = getPosition(myElement);
$("#diaf").mouseover(function () {
    kathar();
    $("#diaf").css({
        opacity: 1
    });
    $("#diaf").animate({
        width: ($(window).width() * 0.06),
        height: ($(window).width() * 0.06),
        opacity: 1
    }, 50);
    $("#diaf_div").fadeIn(50);
});
$("#diaf").mouseout(function () {
    $("#diaf").css({
        opacity: 1
    });
    $("#diaf").animate({
        width: ($(window).width() * itx),
        height: ($(window).width() * itx),
        opacity: 1
    }, 50);
});

//Items

var
diaf_height = 400;
document.getElementById('diaf_div').style.height = diaf_height;
document.getElementById('diaf_div').style.position = "absolute";
document.getElementById('diaf_div').style.left = position.x;

document.getElementById('diaf_div').style.top = $(window).height() - ($(window).width() * itx) - diaf_height;

$("#diaf_div").mouseleave(function () {
    kathar();
});
$("#diaf_1").mouseover(function () {
    $("#diaf_1").css({
        opacity: 1
    });
    $("#diaf_1").attr("src", "icon/diafora/apokries1.png")

});
$("#diaf_1").mouseout(function () {
    $("#diaf_1").css({
        opacity: 1
    });
    $("#diaf_1").attr("src", "icon/diafora/apokries.png")
});
$("image2").mouseover(function () {

});

谢谢你，对不起我的英语，我不是母语人士。

Answer 1

取决于您的布局：如果可能，请将弹出窗口设置为缩略图的子项。将缩略图设置为

position:relative;

和弹出窗口

position:absolute;
bottom:100%;

在此处查看动态创建的示例： https://jsfiddle.net/svArtist/ck25bgtn/

如果您希望弹出窗口的水平中心与缩略图的水平中心匹配，也可以在CSS中完成： https://jsfiddle.net/svArtist/pt741nt7/

.popup{
    position:absolute;
    bottom:100%;
    left:0%;
    right:0%;
    margin: 0 auto;
}

屏幕上的div中的图像位置html

1 个答案: