使用jquery垂直对齐动态加载图像

时间:2012-09-05 08:59:47

标签: javascript jquery html css

我想动态调整div中加载的图像。我想到了一个解决方案,以获得父div的高度,并获得当前加载图像的高度,并从父div中减去它并除以2 ..这样的东西..

$(".gallery a").click(function (evt) {
      evt.preventDefault();
      $(".image").empty().append( 
      $("<img>", {src: this.href})
      );
    });

这里我想添加这样的东西,但我不知道确切的代码

$("<img>", {src: this.href, style: (margin-top:350-src.height()/2})

其中350是我的父div高度..请给我一个代码..我已经尝试了一切,但没有其他工作在这些动态加载图像。

1 个答案:

答案 0 :(得分:1)

我在下面发布的代码中的'mydesirednumber'变量包含你的“得到父div的高度并得到当前加载图像的高度并从父div中减去它并除以2”的答案

下面的例子假设你有这样的DOM结构:

GALLERY
  - DIV CLASS="thatdiv"
     -IMAGE
     -IMAGE
     -IMAGE
  - A (anchor)
  - A (another anchor)...

代码如下:

$(".gallery a").click(function (evt) {
      evt.preventDefault();
      //whatever else you wanted to do before, here
      var parentdivheight = $('.thatdiv').height();
      var imageheight = $(<<WHEREVER-CURRENTLYLOADING-IMAGE-IS>>).height();
      var mydesirednumber = (parentdivheight - imageheight)  /2 ;
       //whatever else you wanted to do after, here

    });