克隆图像改变固定div位置

Question

当用户点击旋转木马中的图像时，我正在创建一个弹出式大图。我已经实现了这一点，但图像位置取决于其在旋转木马中的位置。我现在拥有的CSS是：

#carousel1{
    width:1000px;
    height:200px;
    overflow:scroll;
}
#popUp{ 
    display: none;
    position: fixed !important;
    width: 580px !important;
    height: 350px !important;
    z-index: 9999;
}

相关的HTML是：

<div id = "carousel1">
    <img class="cloudcarousel" src="1.png" alt="1" title="Flag 1 Title" />
    <img class="cloudcarousel" src="2.png" alt="2" title="Flag 2 Title" />
    <img class="cloudcarousel" src="3.png" alt="3" title="Flag 3 Title" />
    <img class="cloudcarousel" src="4.png" alt="4" title="Flag 4 Title" />
    <img class="cloudcarousel" src="5.png" alt="5" title="Flag 5 Title" />
</div>
<div id = "popUp"></div>

相关的jQuery是：

this.imagePop = function () {
    if (options.imagePop !== 'no') {

        $(container).bind('click', this, function (event) {

            clearInterval(event.data.autoRotateTimer); // Stop auto rotation if mouse over.
            clearInterval(event.data.intervalLeft);
            clearInterval(event.data.intervalRight);
            var text = $(event.target).attr('alt');
            // If we have moved over a carousel item, then show the alt and title text.

            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();
                });
            });
        });
    };
};

有关该问题的工作示例，请访问：www.bingetech.com/carousel

是否可以使用克隆的图像将popUp div置于屏幕中间？

Answer 1

我认为它与.clone（）方法有关。您可以确保仅将popUp图像属性设置为克隆图像将导致与克隆目标接触相同的值。

#popUp img {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: -290px;
}

注意：确保在css

中的.cloudcarousel类下面声明它

Answer 2

您是否需要将当前的主要徽标图像替换为用户在旋转木马中单击的图像？

您能详细说明放大图像的位置吗？或者想要什么的快照？