Question

我创建的图片在一个See this image

中有4张图片

现在，我要做的是让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>

从拼接图像悬停时图像更改

1 个答案: