如何在点击时更改图像的大小？答案

【问题标题】：How to change the size of an image on click?如何在点击时更改图像的大小？
【发布时间】：2021-02-05 15:42:44
【问题描述】：

好吧，我正试图让图像从一种尺寸变为更小的尺寸，然后只需单击一下即可恢复到另一种尺寸。（您正在单击图像。）我尝试了很多选项，但我没有让它在单击时更改为不同的大小。

这是代码的 HTML 部分（有问题）：

<p>Money: $<a id="clicks">0.00</a></p>
    <img src="Money.png" alt="Increase Money" title="Click Me to increase the Money." type="button" onclick="moneyOne()" class="clicked">

这是代码的 Javascript 部分（有问题）：

var clicks = 0.00;
    function moneyOne() {
        clicks += 0.01;
        document.getElementById("clicks").innerHTML = clicks;
    };

这是代码的 CSS 部分（有问题）：

.clicked {
  width: 410px;
  height: 200px;
  transition-property: width, height;
  transition-duration: 1s;
}

.clicked: {
  width: 400px;
  height: 190px;
}

【问题讨论】：

1) 您提交的代码似乎是用于更改链接标签 (a) 显示的货币数量，而在更改图像大小时未显示任何内容。 2）你的css有两个.clicked样式修饰符，第二个有错别字
请包含您尝试过的代码，并告诉我们它应该做什么以及它实际做了什么。
好像是stackoverflow.com/questions/16715274/…的副本
图片也添加id，然后通过CSS和JavaScript修改。只需在 Css 中搜索关于图片的转换并将这些属性添加到图片中，也可以使用一些 if 语句。
@Samathingamajig 好吧，我知道第二个 .clicked 有错字，因为我不知道在 : 之后应该放什么，从技术上讲，我还没有真正尝试过任何东西，但我有查了一下怎么做，我很快就对这一切感到困惑。我确实尝试了一些我发现的东西，但它们都没有达到我想要的效果。但是，我确实知道如何通过将鼠标悬停在图像上来改变大小，但我希望它完全执行悬停的操作，当您将鼠标移到图像上然后离开图像时。我应该说我对编码知之甚少，所以我只想保持简单。

标签： javascript html css

【解决方案1】：

你需要像这样使用伪类:active：

.clicked:active {
    width: 400px;
    height: 190px;
}

【讨论】：

好吧，我试过了，但没有用。它甚至没有改变图像的大小。
jsfiddle.net/x8bu3n2a/4 您是否尝试过按住鼠标按钮？这种转变太多了，我认为没有注意到它......

【解决方案2】：

我会使用转换、转换和超时来删除类。

var clicks = 0.00;
var timer;
var img = document.querySelector(".clicked");

function moneyOne() {
  clicks += 0.01;
  document.getElementById("clicks").innerHTML = clicks.toFixed(2);
  img.classList.add("active");
  if (timer) window.clearTimeout(timer);
  timer = window.setTimeout(function() {
    img.classList.remove("active");
  }, 200);
};

.clicked {
  width: 410px;
  height: 200px;
  transition: all .2s ease-in-out;
  transform: scale(1);
}

.clicked.active {
  transform: scale(.6);
}

<p>Money: $<a id="clicks">0.00</a></p>
<img src="https://stackoverflow.design/assets/img/logos/se/se-icon.svg" alt="Increase Money" title="Click Me to increase the Money." type="button" onclick="moneyOne()" class="clicked">

【讨论】：

【解决方案3】：

var clickActive = false;
var waitTime = 150;


document.querySelector("img").onclick = function() {
  if(!clickActive) {
    clickActive = true;
    this.style.animation = "getSmaller "+waitTime+"ms";
    setTimeout(()=>{
      this.style.animation = "";
      clickActive = false;
    }, waitTime);
  }
}

@keyframes getSmaller {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(0.8);
  }
  100%{
    transform: scale(1);
  }
}

/* for testing */
img {
  background: blue;
  width: 200px;
  height: 200px;
}
body {
  margin: 60px;
}

&lt;img src=""&gt;

【讨论】：

OP 要求交替点击的大小。所以当你点击一次时，它会变大，再次点击时会缩小。
@AlexH “从一种尺寸变为较小尺寸，然后再变回另一种尺寸” - 你确定吗？
你说得对，我误解了这个问题。感谢您指出这一点。
请务必解释您的答案。仅靠代码很难学习。
问题？是的，它相当模糊。

【解决方案4】：

添加伪状态 :active 可以实现您想要的效果。

var clicks = 0.00;
    function moneyOne() {
        clicks += 0.01;
        document.getElementById("clicks").innerHTML = clicks;
    };

.clicked {
  width: 410px;
  height: 200px;
  transition-property: width, height;
  transition-duration: 1s;
}

.clicked:active {
  width: 400px;
  height: 190px;
}

<p>Money: $<a id="clicks">0.00</a></p>
    <img src="https://stackoverflow.design/assets/img/logos/se/se-icon.svg" alt="Increase Money" title="Click Me to increase the Money." type="button" onclick="moneyOne()" class="clicked">

【讨论】：