Question

我有五个img-elements，每个都有类＆＃34; .backgroundImage＆＃34;。下面的脚本以中心为中心。如何在不编写脚本5次的情况下告诉我的脚本对每个img执行此操作？

function resize(){
    var imageWidth = $('.backgroundImage').width();
    var imageHeight = $('.backgroundImage').height();

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    if(imageWidth>windowWidth){
        var newWidth = -(imageWidth - windowWidth)/2;
        $('.backgroundImage').css('margin-left', newWidth);
    };

    if(imageHeight>windowHeight){
        var newHeight = -(imageHeight - windowHeight)/2;
        $('.backgroundImage').css('margin-top', newHeight);
    };
};

脚本在document.ready和window.resize

上触发

Answer 1

查看$ .each。类似的东西：

$('.backgroundImage').each(function(index, value){
  var width = $(value).width();
  var height = $(value).height();  // Value is each individual img element

  // do your resizing on each value as necessary
})

Answer 2

传入变量

function resize(selector){
    var imageWidth = $(selector).width();
    var imageHeight = $(selector).height();

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    if(imageWidth>windowWidth){
        var newWidth = -(imageWidth - windowWidth)/2;
        $(selector).css('margin-left', newWidth);
    };

    if(imageHeight>windowHeight){
        var newHeight = -(imageHeight - windowHeight)/2;
        $(selector).css('margin-top', newHeight);
    };
};

现在，那就是说，没有理由经常查看选择器：

function resize(selector){
    var $image = $(selector);
    var imageWidth = $image.width();
    var imageHeight = $image.height();

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    if(imageWidth>windowWidth){
        var newWidth = -(imageWidth - windowWidth)/2;
        $image.css('margin-left', newWidth);
    };

    if(imageHeight>windowHeight){
        var newHeight = -(imageHeight - windowHeight)/2;
        $image.css('margin-top', newHeight);
    };
};

resize('.backgroundImage');

Answer 3

你可以编写一个jQuery插件，如下所示，

(function ($) {
   $.fn.centerImage = function () {
    var operations = {
        resize: function() {
            var windowWidth = $(window).width(),
                windowHeight = $(window).height(),
                imageWidth = this.width(),
                imageHeight = this.height();

            if (imageWidth > windowWidth) {
                var newWidth = -(imageWidth - windowWidth) / 2;
                this.css('margin-left', newWidth);
            }

            if (imageHeight > windowHeight) {
                var newHeight = -(imageHeight - windowHeight) / 2;
                this.css('margin-top', newHeight);
            }
        }
    };

    return this.each(function () {
        var ele = $(this);
        $(window).resize(function () {
            operations.resize.apply(ele, []);
        });
    });
 };
})(jQuery);

Then you can call this as,

$(document).ready(function(){
     $('.backgroundImage').centerImage ();
});

全部

在多个元素上执行脚本

3 个答案: