Question

新手在这里！对不起，如果这很简单的话。

我有一个人的两张照片，睁着眼睛，闭着眼睛。闭眼文件有一个＆＃39; b＆＃39;最后，所以：

＆＃39; /images/person.png' （睁开眼睛）＆＃39; /images/personb.png' （闭着眼睛）

我想要的是将鼠标转换为鼠标中心＆＃39;非常快，因此图像看起来很快连续闪烁两次。

我真的很感激任何帮助。

谢谢费拉斯！

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;}
}

Answer 2

你可能不得不用javascript做到这一点。

假设您的图片类似于#blinkingimage：

function blinkImage(image,num) {
  setTimeout(function() {
    image.src = 'images/personb.png';
    setTimeout(function() {
      image.src = 'images/person.png';
    }, 50); // Set this to however long you want the blink to be, in milliseconds
  }, 50); // Set this to however long you want the delay to be, in milliseconds      
}

$('#blinkingimage').hover(function() {
  blinkImage($(this),1);  //You said you want it to blink twice, so you'll need to call blinkImage twice
  setTimeout(function() {
    blinkImage($(this),2);
  }, 100); // Set this to twice the length of one blink call
});

轻拂IMG src属性以模拟闪烁

2 个答案:

HTML

JS

CSS