Question

对于那些拥有战地3的人，有人可以向我解释如何重新创造使徽标“闪烁”的效果。我知道图像有3种状态（鼠标输出，悬停和鼠标输入），但我不知道如何让它闪烁。

通过登录BF3战斗日志并将鼠标悬停在徽标上，可以看到徽标的效果。

有没有人有任何想法？

Answer 1

这是附加到图像的事件：

var $headerLogoBF3=$("a.base-header-logo-bf3");
$headerLogoBF3.pageBind("mouseover", function() {
  try {
    $(this).stop().animate({backgroundPosition:"0px -136px"},80, function() {
      $(this).stop().animate({backgroundPosition:"0px -68px"});
    });
  } catch(e){}
});
$headerLogoBF3.pageBind("mouseout",function( {
  try{
    $(this).stop().animate({backgroundPosition:"0px 0px"},"slow");
  } catch(e){}
});

Answer 2

这里没有魔力，它只是在你悬停时切换图像。如果在悬停徽标时检查DOM，您将看到背景位置如何从0 0跳到0~-100px，最后跳到0~-50px，使用此图像http://battlelog-cdn.battlefield.com/public/base/bf3/header-logo2.png?v=590使其首次跳转到最后一个“闪闪发光”，然后到中间一个。

编辑：为了达到这个目的，你要做的是说：

$('#logo').hover(function () {
    var logo = $(this);

    logo.css('background-position', '0 -100px');

    setTimeout(function () {
        logo.css('background-position', '0 -50px');
    }, 5);
}, function () {
    $(this).css('background-position', '0 0');
});

Edit2：您甚至可能不需要setTimeout。

Answer 3

你实际回答了自己的问题：

图像具有鼠标悬停，悬停和鼠标悬停图像。悬停可能是一个小的gif，一旦结束就会被鼠标图像取代。没有什么困难，也许纯粹的CSS可能！

祝你好运。

编辑：我的回答是错误的。他们正在使用一个图像，根据鼠标移动它们导航。有关正确的解释，请参阅Powerbuoy的答案。

战地3标志效果

3 个答案: