Question

为了垂直居中图像（this page上的缩略图），我尝试了这个：

//Center the images (thumbnails) in the slideimg.js
$(document).ready(function() {
    $('.work-view img').load(function(){
        //get img dimensions
        var h = $(this).height();
//alert(h);
        //set img position
        $(this).css('position','absolute');
        $(this).css('top','50%');
        $(this).css('margin-top',-Math.round(h/2) + 'px');
    });
});

但它适用于Chrome但它不适用于Firefox，因为firefox在缓存中有图像，而.load仅用于加载图像。我正在尝试这个：

//Center the images (thumbnails) in the slideimg.js
$(document).ready(function() {
    function imageLoaded() { // function to invoke for loaded image
    //get img dimensions
    var h = $(this).height();
//alert(h);
    //set img position
    $(this).css('position','absolute');
    $(this).css('top','50%');
    $(this).css('margin-top',-Math.round(h/2) + 'px');
    }
    $('.work-view img').each(function(){
    if( this.complete ) {
        imageLoaded.call( this );
    } else {
        $(this).one('load', imageLoaded);
    }
    });
});

但它不起作用...... $(this).css('position','absolute');将它们移到右边而不是将它们留在水平位置......我做错了吗？

Answer 1

试试这个，我认为你正在失去你的形象目标。

//Center the images (thumbnails) in the slideimg.js
function imageLoaded(thisImage) { // function to invoke for loaded image
  //get img dimensions
  var h = $(thisImage).height();
  //set img position
  $(thisImage).css('position','absolute');
  $(thisImage).css('top','50%');
  $(thisImage).css('margin-top',-Math.round(h/2) + 'px');
}
$(document).ready(function() {
 $('.work-view img').each(function(){
  if( this.complete ) {
    imageLoaded.call( this );
  } else {
    var self = this;
    $(this).one('load', function(){ imageLoaded(self); });
  }
 });
});

我所做的是将函数分解出来，并为其添加一个参数，因为您试图将this多次传递给函数，但该函数不接受参数。在函数中，this正如所写的那样是指window。

使用jquery垂直居中图像

1 个答案: