Question

我正在制作旋转图像的旋转木马，当你点击一个图像时，它会弹出“使用jQuery”，以下是：

var $img = $(event.target);
        $('#popUp').html($img.clone().height(200).width(300)).add($('#overLay')).fadeIn();
        $('#popUp').add($('#overLay')).click(function () {
        $('#popUp').add($('#overLay')).fadeOut(function () {
        $('#popUp').empty();

这很有效，除了popUp div根据点击的图像（所有图像大小相同）更改位置，并且只能正确对齐其中一个点击的图像。

用于完成定位的CSS是：

#popUp
 {
    display: none;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px; 
    margin-top: -100px;
    z-index: 9999;
}

父元素样式：

#carousel1
{
width:1000px;
height:200px;
overflow:scroll;
}

是否可以对其进行设置，以便无论点击哪个图像，它们都会在屏幕中居中显示？

Answer 1

概念演示

以下是使用jQuery解决此问题的一种方法。

我将演示如何创建一个弹出窗口（相对于视口水平和垂直居中）以查看放大的图像。我还创建了一个覆盖，部分遮挡了屏幕的其余部分。

例如，您的HTML可能如下所示：

<div class="carousel">
    <img src="http://placekitten.com/200/200">
    <img src="http://placekitten.com/220/220">
    <img src="http://placekitten.com/230/230">
    <img src="http://placekitten.com/240/240">
</div>
<div class="popup"></div>

我将明确定义一个元素（最初隐藏），它将切换为弹出/覆盖。

CSS类似于以下内容：

对于.carousel，我在父容器的中心有一组文本对齐的内联块图像：

.carousel {
    border: 2px solid gray;
    padding: 10px;
    text-align: center;
    height: auto; /* set this to 1000px and see how it behaves with scrolling */
}
.carousel img {
    display: inline-block;
    width: 100px;
    vertical-align: middle;
}

对于弹出/叠加：

.popup {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(125,125,125,0.5);
}
.popup .wrap {
    width: 300px;
    height: 200px;
    background-color: white;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -100px;
}
.popup .wrap img {
    height: 100%;
    vertical-align: top;
}

.popup元素的位置是固定的，并且大小可以填充视口（窗口）。我有一个固定宽度和高度的内包装容器（.wrap），它相对于固定定位的父级绝对定位。我调整左/上边距使其居中。

缩放图片以使高度填充.wrap元素，并且由于text-align: center上的.wrap，图片水平居中。

最后，jQuery：

function showPopup(imgSrc) {
    var theImg = '<div class="wrap"><img src="'+imgSrc+'"></div>';
    $(".popup").empty().append(theImg).fadeIn();
}

$(".carousel img").on('click',function (){
    var theSrc = $(this).attr('src');
    showPopup(theSrc);
});
$(".popup").on('click', ".wrap", function(){
    $(".popup").fadeOut();
})

单击缩略图时，弹出/覆盖会淡入，当您单击图像或其周围的左/右空白区域时淡出/淡出。

您可以在http://jsfiddle.net/audetwebdesign/rQdZR/

看到有效的演示

其他评论

您可以围绕此演示开发多种变体，例如，您可以省略叠加，以便您可以直接单击缩略图。您还可以修复弹出窗口以外的位置，而不是视口的中心。

Answer 2

垂直对齐？

http://jsfiddle.net/UTXL4/

#popUp{
    position: absolute;
    width:300px;
    height:200px;
    top:50%;
    left: 50%;
    margin-left:-150px;
    margin-right:-200px;
    z-index: 9999;
    background-color:red;
    vertical-align: middle;
}

绝对定位改变

2 个答案:

概念演示