jQuery核心：显示浮动图像答案

【问题标题】：jQuery core: display a floating imagejQuery核心：显示浮动图像
【发布时间】：2011-02-10 03:22:41
【问题描述】：

我有 a PHP-script 每页最多列出 20 个纸牌游戏玩家：

我还为大多数玩家提供了照片/头像-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 脚本生成它们？

以及鼠标悬停在网页底部附近的情况如何处理（即如何将图片放置得最好，使其可见）

谢谢！亚历克斯

【问题讨论】：

标签： jquery image

【解决方案1】：

我还在学习 jQuery，但让我来试试吧。

假设每个玩家都有一个包含他们信息的 div，并且您希望当用户将鼠标移到上面时显示该图像。像这样在 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).ready 处理程序中

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

这应该让你开始。您需要添加 jQuery 代码来设置图像 div 以显示在您想要的确切位置（鼠标指针所在的位置，或行中的设置位置）。

希望这会有所帮助！

【讨论】：

【解决方案2】：

如果照你说的做，创建#avatarDIV，隐藏，那么你需要做的就是改变图片源并绑定图片的.load()事件^†等待加载图像，然后在所需的坐标处打开它（这可能来自事件中的鼠标位置）。如果您需要图像与光标保持一致，.mouseover() 事件处理程序可以使其保持更新。

** UNTESTED **（可能包含错误！）

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

注意。如果宽度/高度设置不像我上面那样工作，请改用avatar.attr('width') 和avatar.attr('height')。 getLinkURL() 是一个占位符，用于表示您打算从悬停的链接中获取头像图像 URL。

^†.load() 例程并不总是在某些浏览器中触发图像时缓存，最好检查图像 .complete 绑定后的属性加载事件并手动调用它是真的。

【讨论】：