javascript - Flick IMG src 属性来模拟眨眼

Question

这里是新手!如果这很简单，我很抱歉。

我有两个人的图像，睁着眼睛和闭着眼睛。闭眼文件末尾有一个“b”，所以:

'/images/person.png'(睁开眼睛) '/images/personb.png'(闭上眼睛)

我想要的是非常快速地将 src 切换到“mouseenter”，这样图像看起来就像快速连续闪烁两次。

我非常感谢任何帮助。

谢谢各位!

Answer 1

以下是在 HTML5 中执行此操作的方法:

Live example on JSFiddle

只需将 CSS 中的 background-color 替换为 background-image:url('your_url'); 即可。

HTML

<div id="your_flipping_img"></div>

JS

$('#your_flipping_img').bind('mouseover', function(){
    $('#your_flipping_img').addClass('animate');
})

$('#your_flipping_img').bind('mouseout', function(){
    $('#your_flipping_img').removeClass('animate');
})

CSS

#your_flipping_img{
    background-color:#efefef;
    width:150px;
    height:150px;
}

.animate{
    -webkit-animation: flicking .5s; /* Chrome, Safari, Opera */
    animation: flicking .5s;
}

@-webkit-keyframes flicking {
    0%   {background-color: red;}
    25%  {background-color: #efefef;}
    50%  {background-color: red;}
    100% {background-color: #efefef;}
}

/* Standard syntax */
@keyframes flicking {
    0%   {background-color: red;}
    25%  {background-color: #efefef;}
    50%  {background-color: red;}
    100% {background-color: #efefef;}
}