个人中心
gpt4 book ai didi

javascript - 单击时覆盖图像居中的图像

转载 作者：行者123 更新时间：2023-11-30 14:02:52 24 4
gpt4 key购买 nike

诚然，我不是 html/css 的最佳人选，但是这似乎像它一样应该足够简单。然而，我花了很长时间在谷歌上搜索和试验，但仍然没有骰子。我试图在单击(而不是悬停)时淡入以另一个图像为中心的图像叠加层。这在语法上是一个糟糕的句子。
什么？叠加图像。
在哪里？在另一个图像上。
如何？居中，淡入/淡出。
什么时候？单击时。

我一直在尝试合并来自 https://www.w3schools.com/howto/howto_css_image_overlay.asp 的代码和 https://www.w3schools.com/howto/howto_css_overlay.asp没有运气。我试过基于 Fade div in and out using the same link onclick 的 toggle()但显然我还是做错了。

这就是我现在拥有的(而且我确定它是一团糟)
http://jsfiddle.net/xvdptw6L/1/ 

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
/*.container:hover .image {
  opacity: 0.3;
}
.container:hover .middle {
  opacity: 1;
}*/
.overlay {
}
</style>
</head>
<body>

<div class="container">
  <img src="https://www.ningenlife.com/pub/media/catalog/product/cache/c687aa7517cf01e65c009f6943c2b1e9/u/c/ucc-93553-3.jpg" class="image" style="width:100%">
  <div class="middle">
    <img src="https://www.pokemoncenter.com/wcsstore/PokemonCatalogAssetStore/images/catalog/products/P3486/701-02860/P3486_701-02860_01.jpg" class="overlay" style="width:100%">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
$('.image').click(function(e){    
    $('.overlay').toggle('fast');
});
</script>

</body>
</html>

当注释掉的代码正在运行时，第二个图像以我想要的方式淡出，但当它不是时，js 什么都不做。请帮我看看哪里出了错。

*在下面完美回答，只需添加用于复制/粘贴的工作版本的 w3schools 和 fiddle 编辑器，或者如果将来有人需要此解决方案，可以轻松使用代码
https://www.w3schools.com/code/tryit.asp?filename=G3T58QO5TYOY
http://jsfiddle.net/curfohwy/

最佳答案

只需在单击时向包含的 div 添加一个类，然后您就可以按照自己的喜好操作 css，如下所示:

$('.container').click(function(e){    
    $(this).toggleClass('active');
});
.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container.active .image {
  opacity: 0.3;
}

.container.active .middle {
  opacity: 1;
}
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
  <div class="container">
  <img src="https://www.ningenlife.com/pub/media/catalog/product/cache/c687aa7517cf01e65c009f6943c2b1e9/u/c/ucc-93553-3.jpg" class="image" style="width:100%">
  <div class="middle">
    <img src="https://www.pokemoncenter.com/wcsstore/PokemonCatalogAssetStore/images/catalog/products/P3486/701-02860/P3486_701-02860_01.jpg" class="overlay" style="width:100%">
  </div>
</div>

关于javascript - 单击时覆盖图像居中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56013451/

24 4 0
文章推荐： javascript - 按下按钮时功能无法正常工作
文章推荐： c# - 不止一种控件类型的 WPF StackPanel.Resources setter ？
文章推荐： c# - 获取我的对象在 linq 集合中位置的好方法
文章推荐： c# - 使用 itextsharp 将 html 生成为 pdf
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com