戰地3標誌效果

對於那些擁有「戰地3」的玩家，請有人向我解釋如何重新創造使徽標「閃爍」的效果。我知道圖像有3種狀態（鼠標懸停，懸停和鼠標懸停），但我不知道如何使它閃爍。戰地3標誌效果

通過登錄BF3 battlelog並將鼠標懸停在徽標上可以看到徽標的影響。

有沒有人有任何想法？

2012-03-15 Albert

什麼jQuery的庫被加載在網頁上？使用FireBug來看看（淨選項卡），它應該提供一個提示。 – 2012-03-15 12:08:35

使用Chrome的Inspect元素（腳本選項卡），它似乎都是自制庫。 – Albert 2012-03-15 12:21:50

這是一個mouseenter事件和一個精靈 - http://battlelog-cdn.battlefield.com/public/base/bf3/header-logo2.png?v=590只要做一些谷歌搜索和jQuery的鼠標中心，你可以很容易地做這個。 – Archer 2012-03-15 12:34:21

這是附於圖像的事件：

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

來源

2012-03-15 12:23:30

太棒了！我怎麼看不到？感謝一百萬撒尼！ – Albert 2012-03-15 12:27:59

這裏沒有什麼魔力，它只是當你懸停時切換圖像。如果您在懸停徽標時檢查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的。

來源

2012-03-15 12:20:30 powerbuoy

我注意到了。我只是想知道他們用什麼來製造這種暫停。 – Albert 2012-03-15 12:25:03

查看更新的答案。 – powerbuoy 2012-03-15 13:59:14

你居然回答了自己的問題：

的圖像具有鼠標移開，懸停和鼠標的圖像。懸停可能是一個很小的gif，一旦它結束，它就會被鼠標移入圖像所取代。沒有困難，可能與純CSS！

祝你好運。

編輯：我的回答是錯誤的。他們正在使用一個圖像，根據鼠標移動，他們可以在其上導航。請參閱Powerbuoy的答案以獲得正確的解釋。

來源

2012-03-15 12:20:33 Rvervuurt

但在鼠標懸停時，沒有暫停，所以您不會看到效果（因爲更改速度太快）。我是對的還是缺少什麼？我在想什麼是在JavaScript中使用setTimeout函數，間隔爲100ms。你認爲這會起作用嗎？ – Albert 2012-03-15 12:23:46

你的猜測是錯的... – 2012-03-15 12:23:54

我確實是錯的。顯然，他們使用一個圖像，在那裏他們查看的不同部分。 Powerbuoy在他的文章中有圖片。 – Rvervuurt 2012-03-15 12:30:10

戰地3標誌效果

回答

相關問題