模拟google相册鼠标移动提示信息

在jQuery中文社区中看到一篇帖子提问，http://bbs.jquery.org.cn/read.php?tid-3992.html

模拟google的照片鼠标提示信息

下面介绍如何实现：

1、在html中增加两个img

<img src="panda.jpg" border="0" alt="" width="231" height="300" />
<img src="no.jpg" alt="" width="231" height="300" />

2、准备一个提示信息使用的DIV层

<div id="tipInfo" style="display:none"></div>

这里一定要主意把tipInfo的position设置为absolute，我在做的时候就卡到这里了，后来发现原来忘了设置……

3、javascript代码：

$(function() {
        //$('#content img:not(:eq(0))')的意思是不显示第一张图片的信息
    $('#content img:not(:eq(0))').hover(
        function() {
            var position = $(this).position();
            var tipHight = $('#tipInfo').height();

            var endTop = (position.top + $(this).height()) - tipHight;
            //$(this).addClass('active');
            $("#tipInfo").width($(this).width())
                .html('作者：' + $(this).attr('author'))
                .show()
                .css({top: endTop + "px", left: position.left + "px"});
        },
        function() {
            //$(this).removeClass('active');
            $('#tipInfo').hide();
        }
    );
});

测试通过，代码很简单，点击这里查看演示

源码[download#12#format=1]