0

我希望从按住单击时更改按钮的图像，然后在单击释放时更改回来。我目前有一个平面图像，我希望它变成一个带有内阴影的图像，使它看起来像一个按钮按下，但是当鼠标点击被释放时又变回原来的平面图像。我试过onmouseup，但我认为我使用不正确。我希望"item"and"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);"/>
4

2 回答 2

3

简单的解决方案

.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-img

于 2017-06-07T13:52:25.483 回答
2

看看这个非常简单的概念证明解决方案（基于您的问题和评论）：

function mousedown() {
  var el = document.getElementById("image01");
  el.setAttribute("src", "http://blog.fantasy.co/wp-content/uploads/2013/02/feature_Net.jpg")
}

function resetImage() {
  var el = document.getElementById("image01");
  el.setAttribute("src", "https://camo.githubusercontent.com/b87a252140848659b80b0d2297e32dc62afee0cf/68747470733a2f2f646f63732e6d6963726f736f66742e636f6d2f656e2d75732f646f746e65742f61727469636c65732f696d616765732f6875622f6e6574636f72652e737667")
}
<img id="image01" src="https://camo.githubusercontent.com/b87a252140848659b80b0d2297e32dc62afee0cf/68747470733a2f2f646f63732e6d6963726f736f66742e636f6d2f656e2d75732f646f746e65742f61727469636c65732f696d616765732f6875622f6e6574636f72652e737667" alt="image" onmousedown="mousedown()" onmouseup="resetImage();" onmouseleave="resetImage();" />

通常我会建议使用 CSS（如果您仍然需要多个图像，可以使用拼接图像）来实现此效果。

于 2017-06-07T13:50:09.933 回答