Question

我想做一个之前/之后的图像效果滑块，例如，当单击一个图像时，它将替换为另一个图像。再次，当单击替换图像时，它将返回到先前图像。

Onclick功能只能一次更改图像。这是我的工作演示Codepen

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
input[type="radio"]:checked ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 100px; /* little bit of a magic number :( */
  overflow: visible;
}

在此之前，我尝试过使用mouseover和mouseout函数。演示Codepen

  <img src="https://i.ibb.co/wNsz0MW/Editesy-11.jpg" 
    onclick="this.src ='https://i.ibb.co/RgL4wPm/Editesy-13.jpg';">

但是不幸的是，mouseover和mouseout功能在移动设备上不起作用。使用mouseover和mouseout时，点击屏幕上的新图像时会替换，但是当我再次点击屏幕上的图像时，图像不会返回到先前的图像。

如果我可以在所有设备上使用mouseOver和mouseOut实现它，那将是最佳解决方案。

Answer 1

如果您想在html元素本身中定义所有代码，则有些棘手。

基本上，您可以使用html data-* 属性存储任意数据-例如第二张图片的url。

<img src="https://i.ibb.co/wNsz0MW/Editesy-11.jpg" data-secondImg="https://i.ibb.co/RgL4wPm/Editesy-13.jpg">

在 onclick 处理程序中，我们需要检查当前为img元素的 src 属性设置的url，并将其与data-secondImg进行比较。如果不同，请使用secondImg中的URL并将当前URL存储在备份变量中。如果没什么不同，请使用备用变量中的网址。

这是一个例子：

<img src="https://i.ibb.co/wNsz0MW/Editesy-11.jpg" onclick="if(this.src!=this.getAttribute('data-secondImg')){this.old=this.src;this.src=this.getAttribute('data-secondImg')}else{this.src=this.old;}" data-secondImg="https://i.ibb.co/RgL4wPm/Editesy-13.jpg">

跟进

如果您要使用多个事件-onMouseOver和onClick-应该触发相同的动作，并且如果您有很多图像，则最好将动作定义为一个函数，并以其名称进行引用。< / p>

此示例对onMouseOver和onClick事件都做出反应：

function swap(t) {
  if (t.src != t.getAttribute('data-secondImg')) {
    t.old = t.src;
    t.src = t.getAttribute('data-secondImg')
  } else {
    t.src = t.old;
  }
}

<img src="https://picsum.photos/id/88/64/64" onClick="swap(this)" onMouseOver="swap(this)" data-secondImg="https://picsum.photos/id/76/64/64">

Answer 2

完成此操作的一种方法是创建两个单独的图像。

让其中一幅图像在悬停时执行所需的操作，另一幅在单击时执行所需的操作。

最后，使用CSS（或JS）隐藏给定屏幕尺寸或设备类型不需要的元素。

<style>
  .mobile {
    visibility: visible;
  }
  .desktop {
    visibility: hidden;
  }
  @media screen and (max-width: 600px) {
    .mobile {
      visibility: hidden;
    }
    .desktop {
      visibility: visible;
    }
  }
</style>

<img
  class="mobile"
  src="https://i.ibb.co/wNsz0MW/Editesy-11.jpg"
  onclick="this.src ='https://i.ibb.co/RgL4wPm/Editesy-13.jpg';"
/>
<img
  class="desktop"
  src="https://i.ibb.co/wNsz0MW/Editesy-11.jpg"
  onmouseover="this.src ='https://i.ibb.co/RgL4wPm/Editesy-13.jpg';"
  onmouseout="this.src = 'https://i.ibb.co/wNsz0MW/Editesy-11.jpg';"
/>

Javascript onClick之前和之后带有滑块的图像效果

2 个答案:

跟进