javascript - 按住单击时更改图像

Question

我希望更改按住单击时按钮的图像，然后在单击释放时更改回来。我目前有一个平面图像，我希望将其更改为带有内阴影的图像，使其看起来像按下按钮，但在释放鼠标单击时变回原始平面图像。我尝试了 onmouseup 但我认为我使用它不正确。我希望 "item" 和 "item2" 在单击时保持其图像，并且可以正常工作。不过，我希望 "item3" 在鼠标释放时变回原样，或者在单击后立即变回原样。

(编辑:我是 JavaScript 新手，它不一定是 onmouseup 解决方案。如果有人可以解释如何创建一个执行此操作的函数，那就太好了。)

JS:

var onImgStp= "images/stop.png";
var onImgPnk= "images/pink.png";
var onImgMut= "images/mute.png";
var offImg= "images/green.png";
var offImgStp= "images/stop2.png";

HTML:

<img class="item" src="images/pink.png" onclick="manage(1); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(2); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(3); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(4); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(5); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(6); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(7); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(8); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item2" src="images/mute.png" onclick="this.src = (this.src.endsWith(offImg)? onImgMut : offImg);"/>
<img class="item3" src="images/stop.png" onmouseup="this.src = (this.src.endsWith(offImgStp)? onImgStp : offImgStp);"/>

Answer 1

简单的解决方案

.image-swap {
  cursor: pointer;
}

.image-swap>img, .image-swap:active>img:first-child {
  display: none;
}

.image-swap>img:first-child, .image-swap:active>img:last-child {
  display: block;
}

<div class="image-swap">
  <img src="http://blog.hvidtfeldts.net/media/city7.png" />
  <img src="http://blog.hvidtfeldts.net/media/city2.png" />
</div>

删除选择和拖动效果

.image-swap {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
}

.image-swap>img {
  pointer-events: none;
  display: none;
}

.image-swap>img:first-child {
  display: block;
}

.image-swap:active>img:first-child {
  display: none;
}

.image-swap:active>img:last-child {
  display: block;
}

<div class="image-swap">
  <img src="http://blog.hvidtfeldts.net/media/city7.png" />
  <img src="http://blog.hvidtfeldts.net/media/city2.png" />
</div>

平滑过渡

.image-swap {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
  position: relative;
}

.image-swap>img {
  pointer-events: none;
  transition: all 0.6s;
  position: absolute;
  opacity: 0;
  left: 0;
}

.image-swap>img:first-child {
  position: static;
  opacity: 1;
}

.image-swap:active>img:first-child {
  opacity: 0;
}

.image-swap:active>img:last-child {
  opacity: 1;
}

<div class="image-swap">
  <img src="http://blog.hvidtfeldts.net/media/city7.png" />
  <img src="http://blog.hvidtfeldts.net/media/city2.png" />
</div>

如果您愿意，可以为图像提供类，例如 base-img 和 active-img

因此，您可以将 :first-child 替换为 .base-img，将 :last-child 替换为 .active-图片