主页 / 问题 / 1590703
Accepted
Илзия Исхакова
Asked:2024-08-15 00:59:13 +0000 UTC2024-08-15 00:59:13 +0000 UTC

更改图像时增加平滑度

  • 772

我们需要在悬停时更改图像时增加平滑度。

<img
  src="img/old_moscow_1.jpg"
  class="image-transition"
  alt="old moscow"
  onmouseover="this.src='img/current_moscow_1.jpg';"
  onmouseout="this.src='img/old_moscow_1.jpg';"
>
javascript

3 个回答

  1. Best Answer

    div {
  width: 90vmin;
  aspect-ratio: 1;
  margin: auto;
  position: relative;
}

img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s linear;
}

img:first-child {
  opacity: 1;
}

div:hover img:first-child {
  opacity: 0;
}

div:hover img:last-child {
  opacity: 1;
}
    <div>
  <img src="//i.sstatic.net/2X4AwpM6.png" alt="енот">
  <img src="//i.sstatic.net/vaugnko7.png" alt="капибара">
</div>

    • 3

  2. 您可以使用 css 属性transition：

      transition: background-color 0.5s ease;
}

.element:hover {
  background-color: #ff0000;
}
    • 0

  3. 当然，这可以用来在审讯期间折磨人，但我还没有想出更好的办法:)

    const toggleImagesData = [{
  src: "//i.sstatic.net/2X4AwpM6.png",
  alt: "енот"
}, {
  src: "//i.sstatic.net/vaugnko7.png",
  alt: "капибара"
}];

const preload = new Image();
preload.src = toggleImagesData[1].src;

const step = 0.05;
let opacity = 1;

const img = document.querySelector('img');

const setByIndex = i => {
  img.src = toggleImagesData[i].src;
  img.alt = toggleImagesData[i].alt;
  img.style.opacity = i === 0 ? opacity : 1;
}

setByIndex(0);

let rafId;

const show = (i, isFirst = true) => {
  const check = i === 0 ? 1 - opacity : opacity;
  const mult = i === 0 ? 1 : -1;
  
  if (check < 0) return setByIndex(i);
  
  rafId = requestAnimationFrame(() => show(i, !isFirst));
  
  opacity += mult * step;
  
  setByIndex(isFirst ? 0 : 1);
}

img.addEventListener('mouseenter', () => {
  cancelAnimationFrame(rafId);

  rafId = requestAnimationFrame(() => show(1));
})

img.addEventListener('mouseleave', () => {
  cancelAnimationFrame(rafId);
  
  rafId = requestAnimationFrame(() => show(0));
})
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  
  background-color: black;
}
    <img width="200" height="200" class="image-transition" />

    • -1

相关问题