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