当前位置：文江博客话题详情

javascript - 单击时调整所有图像的大小

发布于 2024-10-19 11:52:48 字数 112 浏览 2 评论 0原文

我正在创建一个图像库，我希望用户可以在小、中、大缩略图之间进行选择，并且可以在不重新加载页面的情况下进行更改。 Jaavascript 会是什么样子，以便在鼠标单击按钮时，具有特定类的所有图像都会动态调整大小？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤君无依 2024-10-26 11:52:48

为您的不同体型设置班级。

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

set up classes for your different sizes.

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

回复收藏 0 原文

懒的傷心 2024-10-26 11:52:48

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

   }

}

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

   }

}

回复收藏 0 原文

不即不离 2024-10-26 11:52:48

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

不能保证这会完美工作，但您至少可以在其基础上添加不同的大小增量等。

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

No guarantees that this will work perfectly, but you can at least build off of it to add different size increments, etc.

回复收藏 0 原文

~没有更多了~