使用 jquery 显示具有不同尺寸的随机图像答案

【问题标题】：Display random image with varying dimensions using jquery使用 jquery 显示具有不同尺寸的随机图像
【发布时间】：2011-07-19 17:56:21
【问题描述】：

我有一个简单的页面，它从数组中加载随机图像，并使用 CSS 中的负边距将其居中放置。这目前有效，因为所有图像的大小都相同，但我想调整代码以便它可以容纳不同尺寸的图像。

是否可以在数组阶段计算图像的高度和宽度，然后将其传递给 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);

【问题讨论】：

标签： jquery css image random center

【解决方案1】：

这边：

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

我在 FF3.6 中测试过，它可以工作。

希望这会有所帮助。干杯

【讨论】：

【解决方案2】：

谢谢你；这为我指明了正确的方向。下面是我最终得到的代码，它适用于 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();
    });
});

【讨论】：