0

为了使图像垂直居中（此页面上的缩略图），我尝试了以下操作：

//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');将它们向右移动而不是让它们水平放置......我做错了什么吗？

4

1 回答 1

0

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

//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.

于 2012-10-16T19:13:07.097 回答