1

我有一个可以调整到屏幕尺寸的图像，但是.heightand.width()没有调整，让我的margin-leftandmargin-top没有改变。有没有办法让它调整？

    var $src = $(this).attr("href");
    $('#overlay').append('<img class="image" src="' + $src + '" />'); 
    var $image = $('img');
    $('.image').css('max-height','80%');
    $('.image').css('max-width','90%');
    $('.image').css('position', 'fixed');
    $('.image').css('top', '50%');
    $('.image').css('left', '50%');
    var $height = $image.height();
    var $width = $image.width();
    $('.image').css('margin-top', (($height/2)*-1));
    $('.image').css('margin-left', (($width/2)*-1));

http://jsfiddle.net/a8a4Y/

4

3 回答 3

1

问题是您弄乱图像时未加载图像。所以高度，宽度将始终为零。

http://jsfiddle.net/W8sNw/

所以你可以做的是添加一个处理程序，load event当它被触发时，你可以执行你的代码：

var $src = $(this).attr("href");
$('#overlay').append('<img class="image" src="' + $src + '" />'); 
var $image = $('img');
$image.on("load",function(){ // This is the new stuff, it listen to the load event 
                             // which is fired when the image is loaded and the size
                             // size is known

   var $height = $image.height();
   var $width = $image.width();
   $('.image').css('margin-top', (($height/2)*-1));
   $('.image').css('margin-left', (($width/2)*-1)); 
   console.log("Height: " + $height);
   console.log("Width: " + $width);
})

我还包括了一个更优化代码的示例。例如，每次您使用选择器时，JavaScript 都会在 DOM 中搜索该元素。你应该只做一次，看看：http: //jsfiddle.net/W8sNw/2/

于 2013-08-26T04:32:38.343 回答
0

尝试这个：

var $src = $(this).attr("href");
    $('#overlay').append('<img class="image" src="' + $src + '" />'); 
    var $image = $('img')
$image.ready(function(){

    $('.image').css('max-height','80%');
    $('.image').css('max-width','90%');
    $('.image').css('position', 'fixed');
    $('.image').css('top', '50%');
    $('.image').css('left', '50%');
    var $height = $image.height();
    var $width = $image.width();
    $('.image').css('margin-top', (($height/2)*-1));
    $('.image').css('margin-left', (($width/2)*-1)); 
});
于 2013-08-26T04:34:31.210 回答
-1

jquery resize 事件可能会有所帮助。

将您的代码放入一个函数并在调整大小事件中调用该函数。

于 2013-08-26T04:25:18.860 回答