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

更改src / srcset并不是最佳选择，即使对于单个img也是如此，因为如果你悬停它或者在下载完成之前将其保留，它可以中止图像的下载。

我想我会做其中一个：

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

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

Answer 2

HTML：

<picture id="zen">
 <source class="large" srcset="media/images/feature-films/tmbs/zen-zero-large.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>

jQuery的：

$(document).ready(function() {
  $('#zen').on('mouseover', function () {
    $(this).find('.large').attr('srcset', 'media/images/feature-films/tmbs/zen-zero-large-ro.jpg');
    console.log('mouse over');
  })
  $('#zen').on('mouseout', function () {
    $(this).find('.large').attr('srcset', 'media/images/feature-films/tmbs/zen-zero-large.jpg');
    console.log('mouse out');
  })
});

图片元素srcset响应图像翻转

2 个答案: