如有不明白的地方欢迎加QQ群14670545 探讨
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
*{ margin:0; padding:0;}
img{ border:none;}
.content{ width:1100px; margin:0 auto;}
.imglist{ width:1100px;}
.imglist img{ float:left; margin-right:5px;}
#HintImg{ position:absolute; padding:0; margin:0; display:none; z-index:999}
</style>
</head>
<body>
<div class="content">
<div style="height:50px;"></div>
<div class="imglist">
<img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
<img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
<img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
<img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
<img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
</div>
</div>
<div id="HintImg"></div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".imglist img").hover(function() {
$("*").stop(); //停止所有正在运行的动画
var offset = $(this).offset(); //取得事件对象的位置
var _left = (offset.left + $(this).width() + $("#HintImg").width() < 1100) ? (offset.left + $(this).width()) : (offset.left - $("#HintImg").width());
$("#HintImg").html('<img alt="" title="" src="' + $(this).attr("shouimg") + '" />').css({ "top": offset.top + "px", "left": _left + "px" }).fadeIn(500);
}, function() {
$("#HintImg").hide();
});
</script>
</body>
悬浮效果如下: