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');
}

javascript - 点击时调整所有图片的大小

3 个答案: