模拟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" /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]