从拼接图像悬停时图像变化

Question

我创建了一张图片，其中包含 4 张图片 See this image

现在，我要做的是让 css 仅加载顶部的第一个方块。然后，当用户将鼠标悬停在该图像上时，它将在所有四个图像之间切换。

所以它会在加载时显示黑色，然后当用户将鼠标悬停在它上面时，图像会变为红色、蓝色、绿色，然后变回黑色。然后一遍又一遍地重复，直到鼠标移出图像区域。

我知道我可以通过将 png 转换为 gif 来做到这一点，但是图像是在我无法控制的情况下生成的，因此需要这种方法。如果有人能提供帮助，我将永远感激不已。

干杯。

Answer 1

您应该使用 CSS sprites 并在过度使用 setInterval 函数更改位置时进行更改（此处图像的每个块的高度为 300px，因此我们增加 +300）每个定义的间隔时间 ,

下面的代码片段我使用了 .hover() jquery 函数来设置和清除动画。

var interval;
$(function(){
  $("#image").hover( 
      function() {
        var bottom = 0;
        $this = $(this);
        interval = setInterval(function() {
          
          bottom >= 900  ? bottom = 0 : bottom+=300;
          
          $this.css({'background-position' : '0px -'+bottom+'px'});
        } , 1000)
        
      }, 
      function(){
       $this.css({'background-position' : '0 0'})
        clearInterval(interval);
      }
  );
});

#image {
  width:150px;
  height:150px;
  background: url('https://i.stack.imgur.com/h8h14.png') 0 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image" ><div>

从拼接图像悬停时图像变化

Image change on hover from a stitched image

html

javascript

css

jquery

css-sprites