1

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

问题是图像翻转是否可以应用于图片标签中的 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 个需要翻转效果的响应式图像。

4

2 回答 2

1

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

我想我会做其中之一：

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

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

于 2015-02-27T11:02:44.393 回答
0

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');
  })
});
于 2014-09-14T16:16:43.027 回答