javascript - 图片元素 srcset 响应式图像翻转

Question

我正在尝试弄清楚如何将图像翻转效果应用于响应式网站中的图片元素。

问题是图像翻转是否可以应用图片标签中的 scrset 属性？

具有 JavaScript 翻转效果的 img 标签工作示例

<img src="media/images/feature-films/tmbs/zen-zero.jpg" 
 onmouseover="this.src='media/images/feature-films/tmbs/zen-zero-ro.jpg'" 
 onmouseout="this.src='media/images/feature-films/tmbs/zen-zero.jpg'" 
 alt=""/>

具有 JavaScript 翻转效果的图片元素无法正常工作的示例

<picture>
 <source srcset="media/images/feature-films/tmbs/zen-zero-large.jpg" 
 onmouseover="this.src='media/images/feature-films/tmbs/zen-zero-large-ro.jpg'" 
 onmouseout="this.src='media/images/feature-films/tmbs/zen-zero.jpg'" 
 media="(min-width: 880px)">

 <source srcset="media/images/feature-films/tmbs/zen-zero-small.jpg" media="(max-width: 478px)">
 <source srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg">

 <!-- fall back -->
 <img srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg" alt="">
</picture>

有人对使用 srcset 在图片标签上实现翻转效果有什么建议吗？

该网页大约有 12 个需要翻转效果的响应式图像。

Answer 1

即使对于单个 img，更改 src/srcset 也不是最佳选择，因为如果您将鼠标悬停在图像上或在下载完成之前离开图像，它可能会中止图像的下载。

我想我会做以下其中一项:

• 使用cloneNode(true)克隆图片并重写克隆的URL。当原始图片元素收到 mouseover 事件时，将其替换为克隆元素。当克隆收到 mouseout 事件时，将其替换为原始事件。
• 复制标记中的图片，第二个代表悬停图像。第二张图片设置了隐藏属性。根据需要切换两个元素上的 hidden 属性。

将来，应该可以使用诸如 img:hover { content:image-set(...); 之类的 CSS 来切换图像。 }.