鼠标悬停时连续图像交换

-1

我有一个想法，但我不太确定如何执行它。鼠标悬停时连续图像交换

我想要一个图像，当鼠标悬停在它上面时，它会快速更改为随机图像，并很快更改为新的随机图像。它会一直持续下去，直到你将鼠标从它上面移开，然后停在最后一个图像上。当你再次翻转它时，它应该开始再次交换。它会有点像老虎机效应。我不需要他们旋转，只是改变原地。

我真的可以使用一些关于如何实现这一点的指针。我真的不知道从哪里开始。我知道如何在鼠标悬停上交换div的背景图像的基础知识，但这就是我所知道的。

感谢

编辑：http://cargocollective.com/看在屏幕的左上角的货物标志。这就是我正在寻找的效果，除非它会停留在最后一张图片上，而不是重新设置。

来源

2012-03-21 patricko

您可能需要JavaScript。 – j08691 2012-03-21 19:06:24

我该怎么用Javascript做到这一点？我愿意深入研究一个例子 – patricko 2012-03-21 19:15:06

或者，想一想，您可以尝试在悬停时显示快速循环的动画gif。这可行吗？ – 2012-03-21 19:44:01

每一个jQuery的事件有一个回调函数，等等mouseover你可以开始一个回调函数的调用函数B调用函数A等在mouseout，打破了无限的回调循环。

来源

2012-03-21 19:40:40

完美的概念。 +1 – 2012-03-21 19:42:28

好吧，这是有道理的。现在就去试试吧。 – patricko 2012-03-21 19:49:51

JQuery的.hover()可以使用的mouseover和mouseout状态的功能，所以这是容易做到像

HTML：

<img id="swap" src="http://lorempixum.com/200/200/sports" alt=""/>

的jQuery：

var images = ["http://lorempixum.com/200/200/sports", 
       "http://lorempixum.com/200/200/food", 
       "http://lorempixum.com/200/200/abstract", 
       "http://lorempixum.com/200/200/people", 
       "http://lorempixum.com/200/200/technics", 
       "http://lorempixum.com/200/200/city" 
      ],//store a bunch of images in an array 
    i = 0,//counter 
    $swap = $("#swap"),//only get the object once 
    swapper;//setup a var for setInterval 

function swapImg(){ 
    i = i % images.length;//keep i under the array length 
    $swap.attr("src",images[i]);// change image src   
    i++; 
} 

$swap.hover(function(){//mouseover 
    swapper = setInterval(swapImg,10);//call function every 10ms 
},function(){//mouseout 
    clearInterval(swapper);//stop calling the image swapper 
});

here's a demo

我为虚拟图像使用了http://lorempixel.com/，但每次请求时都会返回一张随机图像，因此显示的图像比数组中显示的图像更多，这会使其有时会加载时髦。

来源

2012-03-21 19:47:31 JKirchartz

鼠标悬停时连续图像交换

回答

相关问题