Question

您好我正在尝试为我的网站创建一个灯箱效果，我似乎遇到了centerint的问题，这里的图像是我的代码：

<div id="lightbox">
    <img src="img/accrington-stanley.jpg" alt="Accrington Stanley" class="lightboximg"/>
</div>
  jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");

      this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
      return this;
  } 

   var lightbox = $('div#lightbox');

            var lightboximg = $('img.lightboximg');

  portfolio.on("click","li" ,function(){
                var curent = $(this).attr("data-id");
                for(var i=0;i<arr.length;i++){
                    if(curent === attrValue){
                        for(var index in obj){
                                var attrName2 = index;
                                var attrValue2 = obj[index];
                                if(attrName2 === "img"){
                                    lightboximg.attr("src" , attrValue2);    
                                }     
                  }
                }

                lightbox.center().fadeIn();


            })

每次点击都会改变img.lightboximg的来源，因此容器的宽度和高度会根据图像大小而变化。容器不会以第一次点击为中心，而是以第二次点击为中心。两个循环是仅用于更改img.lightboximg上的src。

另一件我不明白的事情是，如果我试图获得lightboximg变量的宽度和高度，它总是返回0.为什么？任何人都可以告诉我我的代码有什么问题，以及如何核心它以使div #lightbox居中？

编辑：arr是一个包含许多对象的aray。在每个对象中我存储了src和其他参数

编辑：我在尝试使代码工作时发现了一些非常奇怪的东西。如果我在点击处理程序中添加一个警告框，则容器会集中在哪里与任何内容相关？

Answer 1

css方法怎么样？

.lightbox {
      position:absolute;
      left:50%;
      top:50%;
      width:300px;
      height:200px;
      margin-top:-100px;
      margin-left:-150px;
 }

Div不能很好地居中

1 个答案: