Question

我正在尝试通过JavaScript删除缩略图的不透明度。

对于幻灯片演示，我有一个非常简单的JavaScript函数。该功能可以在幻灯片中正常显示，但我也想删除缩略图的不透明度。

幻灯片显示是动态的，其中有一排可单击的缩略图通过HTML页面使用<img src=...>创建，然后缩略图位于所选缩略图的放大图像上方。在我的代码下面，“ enlargeProdThumb”是放大缩略图的ID，而“ thumbImg”是缩略图。我已经通过CSS设置了缩略图的不透明度，但是当缩略图被选择为源时，我想删除不透明度。有没有办法用这样一个简单的脚本来做到这一点，还是我做错了呢？

function slideShow(event){
  var thumbImg = event.target || event.srcElement;
  document.getElementById("enlargeProdThumb").src = thumbImg.getAttribute("src");
}

Answer 1

如果您只需要使用JavaScript更改图像透明度，请阅读此Stack Overflow帖子：change image opacity using javascript

Long-story-short @stecb共享了此片段：

var element = document.getElementById('id');
element.style.opacity = "0.9";
element.style.filter  = 'alpha(opacity=90)'; // IE fallback

Answer 2

我认为您应该创建一个CSS类选择器，以降低不透明度，然后在添加和删除Javascript类之间进行切换。

以下是用于降低不透明度的示例CSS：

.transparent-img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

用于将类添加到dom元素的JavaScript：

var element = document.getElementById("img#transparent");
element.classList.add("transparent-img");

用于从dom元素中删除类的JavaScript：

var element = document.getElementById("img#transparent");
element.classList.remove("transparent-img");

Answer 3

也许这会有所帮助...

<!DOCTYPE html>
<script type="text/javascript">
function image(img) {
    var src = img.src;
    img.style.opacity = "0.4";
}
</script>

<img id="myImage" src="thumbImg style="width:100px" onclick="image(this)">
</html>

如何从缩略图中去除不透明度

3 个答案: