轻击IMG src属性以模拟眨眼

Flick IMG src attribute to simulate blinking

本文关键字：模拟 属性 IMG src 轻击      更新时间：2023-09-26

新手来了!如果这太简单了，我很抱歉。

我有一个人的两幅图像，睁开眼睛和闭上眼睛。eyes closed文件的末尾有一个'b'，所以:

'/images/person.png' (eyes open)'/images/person .png'(闭上眼睛)

我想要的是在'mouseenter'上快速切换src，这样图像看起来就像快速连续闪烁两次。

我很感激你的帮助。

谢谢伙计们!

如何在HTML5中做到这一点:

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

你可能需要用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
});
相关文章：