jQuery:乘以每个IMG的大小

时间:2011-09-09 09:45:26

标签: jquery lambda

我想在originalWidth和originalHeight属性中保留每个IMG宽度和高度的副本。我如何在以后使用它们将每个IMG的新大小设置为originalWidth * k,originalHeight * k?我想我应该使用lambdas或类似的东西,但是因为我是JS的新手而没有想法如何编写表达式。

$("//img[@attrName='value']").style = ???? ;

6 个答案:

答案 0 :(得分:3)

您可以使用data()方法

存储它们
$("img").each(function() {
    $(this).data({
        "width": $(this).width(),
        "height": $(this).height()
    });
});

答案 1 :(得分:2)

您需要使用.each()并为每张图片单独执行此操作。

$("img[attrName='value']").each(function() { ... do stuff ....  });

答案 2 :(得分:2)

你考虑过使用$.data吗?或者,如果您确实需要自定义,它甚至会读取HTML5 data-*自定义属性。

然后你可以在java中编写一些util函数,例如:

答案 3 :(得分:1)

var multiply_by = 2; // example

$("img[attrName='value']").each(function() { 

    // set multiplied width and height
    $(this).width($(this).width() * multiply_by) 
           .height($(this).height() * multiply_by);

});

答案 4 :(得分:1)

如果您只想获取自定义属性并使用它们为图片设置新尺寸,那么:

var k = 2; //double the size of the image
var origW = parseInt($("img").attr("originalWidth"));
var origH = parseInt($("img").attr("originalHeight"));

$("img").css("width", origW*k);
$("img").css("height", origH*k);
// or
$("img").attr("width",origW*k);
$("img").attr("height",origH*k);

答案 5 :(得分:1)

我会做这样的事情(工作jsFiddle example here):

// To store the height and width of each image as data:
$('img').each(function() {
    $elem = $(this);
    $elem.data({
        'origHeight': $elem.height(),
        'origWidth': $elem.width()
    });
});

// To set the size of each image based on a multiplier "new_size":
function resize_images(new_size) {
    $('img').each(function() {
        $elem = $(this);
        $elem.height($elem.data('origHeight') * new_size);
        $elem.width ($elem.data('origWidth' ) * new_size);
    });
}