javascript-單擊時調整所有圖像的大小

Question

我正在創建各種圖像庫，我希望用戶可以在小，中和大縮略圖之間進行選擇，並且無需重新加載頁面即可對其進行更改。 Jaavascript是什么，以便在鼠標單擊按鈕時，具有特定類的所有圖像都會動態調整大小？

Answer 1

var allImgs = document.getElementsByTagName('img'),
    allImgsLength = allImgs.length,
    className = 'something';


for (var i = 0, i < allImgsLength; i++) {
   var image = allImgs[i];

   if (image.className.match(new RegExp('\b' + className + '\b')) {
       // Set what sizes you need
       image.style.width = '400px';
       image.style.height = '200px';

   }

}

Answer 2

使用jQuery：

$('input#foobar').click(function()
{
  var newHeight = 200;

  $('img.foo').each(function()
  {
    if ($(this).height() > 200)
    {
      $(this).css('height', parseInt(newHeight * $(this).css('width') / $(this).css('height')) + 'px');
    }
  });
});

無法保證它會完美地工作，但是您至少可以在此基礎上增加不同的大小增量等。

Answer 3

為您的不同大小設置課程。

$('input#small').click( function()
{
    $('img').removeClass('large medium').addClass('small');
}

$('input#medium').click( function()
{
    $('img').removeClass('large small').addClass('medium');
}

$('input#large').click( function()
{
    $('img').removeClass('medium small').addClass('large');
}