jQuery的核心：顯示一個浮動圖像

我已經a PHP-script上市每頁最多20名遊戲玩家：jQuery的核心：顯示一個浮動圖像

enter image description here

我也有照片/頭像的URL在大多數的球員，我想以顯示它們 - 當鼠標懸停在相應的鏈接/名稱上時，將其顯示爲浮動圖像。雖然我沒有照片的尺寸。

請問我可以用jQuery核心（無插件）的方式做到這一點嗎？

我可能需要創建一個圖像保持器並將其隱藏起來？

$('body').append('<div id="avatar"><img src="no_avatar.gif"</div>').hide();

然後在鼠標懸停事件上替換img的src屬性並使#avatar可見？請幫我使用代碼

我應該將每張照片的URL存儲爲相應的 <a href="player_profile.php">player name</a>的屬性，同時通過我的PHP腳本生成它們嗎？

而如何處理的情況下，當鼠標懸停在附近網頁的底部（即如何將圖像放在最好的，所以它是可見的）

謝謝！亞歷

來源

2011-02-09 Alexander Farber

我還在學習jQuery，但讓我對此有所瞭解。

讓我們假設每個玩家都有一個div與他們的信息，並且您希望圖像在用戶將鼠標移到它上面時出現。戴上格的自定義類和自定義HTML屬性，像這樣：

<div class='.playerDiv' data-PlayerId='PLAYERID' > ... </div>

對於每一個玩家，您可以在每一行HTML代碼是這樣的。

<div id='image_[PLAYERID]' style='display:none; position:absolute' > 
    <img src='[PATH TO YOUR IMAGE]' /> 
</div>

你的腳本可能是這樣的（你的$（document）。就緒處理器中

$('.playerDiv').each(function() { 
    var id = this.attr('data-PlayerId'); 
    .hover(function() { 
     $('#image_' + id).show(); }, 
      function() { 
     $('#image_' + id).hide(); }); 
    });

這應該讓你開始，你將需要添加的jQuery代碼來設置圖像div的顯示在精確的位置，你想要的（無論是在鼠標指針，或行中的一組位置）。

希望這有助於！

來源

2011-02-09 19:22:41

如果照你說的，創造#avatar DIV，隱藏的，那麼所有你需要做的是改變圖像源以及綁定事件的圖像^†等待圖像加載，然後在所需的座標處打開它（這可能來自鼠標在事件中的位置）。如果您需要將圖像保留在光標處，則事件處理程序可以使其保持更新狀態。

** ** UNTESTED（可能包含bug！）

var avatarHolder = $('#avatar'); 
var avatar = avatarHolder.find('img'); 

$('.link-name').hover(function(evt) { 
    var linkURL = getLinkURL(this); 
    avatar.attr('src', linkURL).load(function() { 
     avatarHolder.css('left', + evt.pageX + 'px') 
        .css('top', + evt.pageY + 'px') 
        .width(avatar.width()) 
        .height(avatar.height()) 
        .show(); 
    }); 
    if (avatar[0].complete) { 
     avatar.load(); 
    } 
}, function() { 
    avatar.hide(); 
}).mouseover(function(evt) { 
    avatarHolder.css('left', + evt.pageX + 'px') 
       .css('top', + evt.pageY + 'px'); 
});

NB。如果寬度/高度設置不像上面那樣有效，請改用avatar.attr('width')和avatar.attr('height')。 getLinkURL()是一個佔位符，但是您打算從懸停的鏈接獲取頭像圖片網址。

^†程序確實在某些瀏覽器並不總是火當圖像緩存，最好的檢查圖像結合的 load事件之後 .complete財產和手動調用它，如果它是真實的。

來源

2011-02-09 19:16:14 Orbling

謝謝您的回答 – 2011-02-10 12:50:28

jQuery的核心：顯示一個浮動圖像

回答

相關問題