使用jQuery显示不同尺寸的随机图像

我有一个简单的页面，从数组中加载一个随机图像，并在CSS中使用负边距集中定位。目前，所有图像都是相同的大小，但我想调整代码以适应不同尺寸的图像。使用jQuery显示不同尺寸的随机图像

是否可以在数组阶段计算图像的高度和宽度，然后将它传递给CSS/HTML以将其置于中央位置？这里是我目前正在使用的代码 - 任何帮助将不胜感激。

HTML/CSS：

#content { 
margin-top: -206px; 
margin-left: -290px; 
position: absolute; 
top: 50%; 
left: 50%; 
width: auto; 
height: auto; 
} 

<div id="content"> 
<img class="shuffle" src="" width="580" height="413" border="0" alt="" /> 
</div>

JQuery的：

$(document).ready(function() { $('.shuffle').randomImage({path: 'images/'}); }); 

(function($){ $.randomImage = { defaults: { path: 'images/', myImages: [ 'image01.jpg', 'image02.jpg','image03.jpg', 'image04.jpg', 'image05.jpg' ] } } 

    $.fn.extend({ randomImage:function(config) { 
      var config = $.extend({}, $.randomImage.defaults, config); 
      return this.each(function() { 
       var imageNames = config.myImages; 
       var imageNamesSize = imageNames.length; 
       var randomNumber = Math.floor(Math.random()*imageNamesSize); 
       var selectedImage = imageNames[randomNumber]; 
       var fullPath = config.path + selectedImage; 
       $(this).attr({ src: fullPath, alt: selectedImage }); 
      }); 
     } 
    }); 
})(jQuery);

来源

2011-07-03 mrcollioni

这样：

... 
var fullPath = config.path + selectedImage; 
var img = new Image(); 
img.src = fullPath; 
var width = img.width; 
alert(width); 
...

我在FF3.6测试，它的工作原理。

希望这会有所帮助。欢呼声

来源

2011-07-03 22:27:57

谢谢;这表明我朝着正确的方向前进。下面是我最终使用的代码，它适用于Firefox 5和Safari 5.它不是特别优雅，但功能可能 - 也许别人可能能够简化它。

编辑19.07.11： 基于example here我相当简化了代码;但我觉得它可以做更多的工作来进一步简化它。

HTML：

<div id="wrapper"> 
    <div id="content"></div> 
</div>

的jQuery：

jQuery(document).ready(function($) { 

    var images = ['image01.jpg', 'image02.jpg','image03.jpg','image04.jpg','image05.jpg']; 

    $('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#content'); 

    (function($) { 
     $.fn.verticalAlign = function() { 
      return this.each(function(i) { 
       var oh = $(this).height(); 
       var wh = $(window).height(); 
       var middle = (wh - oh)/2; 
       if (middle > 0) { 
        $(this).css('margin-top', middle); 
       } else { 
        $(this).css('margin-top', 0); 
       } 
      }); 
     }; 
    })(jQuery); 

    $(window).load(function() { 
     $("#content").verticalAlign(); 
     var showContent = function() { $('#content').fadeIn(750); }; 
     setTimeout(showContent, 100); 
    }); 

    $(window).bind('resize', function() { 
     $("#content").verticalAlign(); 
    }); 
});

来源

2011-07-07 23:25:17 mrcollioni

使用jQuery显示不同尺寸的随机图像

回答

相关问题