0

我正在处理旋转的图像轮播，当您单击一个时，它会使用 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();

这很好用，除了弹出 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;
}

是否可以将其设置为无论单击哪个图像，它们都显示在屏幕的中心？

4

2 回答 2

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/

其他的建议

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

于 2013-06-25T23:47:27.347 回答
0

垂直对齐？

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;
}
于 2013-06-25T22:08:19.540 回答