<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿Discuz头像信息提示效果</title>
<script src="CJL.0.1.min.js"></script>
<script src="RelativePosition.js"></script>
<script src="FixedTips.js"></script>
</head>
<body>
<style>
body{font-size:14px;color:#454545;line-height:1.5em;}
a{ color:#666; text-decoration:none;}
.list li{ list-style:none; padding:10px; padding-bottom:20px; margin:0;}
.info{ display:none;}
.tip img, .list img{ width:150px; height:150px;}
.tip{border:1px solid #CAD8E9;padding:15px;width:300px;display:none;background:#FEFEFE;}
.tip .info{ display:block; position:absolute; top:10px; left:180px; line-height:30px;}
</style>
<div id="idTip" class="tip"></div>
仿Discuz头像信息提示效果：
<ul id="idTest2" class="list">
<li> <a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html"><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mx1.jpg" border="0"/></a> <br />
<b>图片滑动切换效果</b>
<div class="info"> UID 486 <br />
精华 16 <br />
魅力 3173 点 <br />
金钱 605.55 元 <br />
威望 20 点 </div>
</li>
<li> <a href="http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html"><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mx2.jpg" border="0"/></a> <br />
<b>图片变换效果</b>
<div class="info"> UID 486 <br />
精华 16 <br />
魅力 3173 点 <br />
金钱 605.55 元 <br />
威望 20 点 </div> </li>
<li> <a href="http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html"><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mx3.jpg" border="0"/></a> <br />
<b>图片滑动展示效果</b>
<div class="info"> UID 486 <br />
精华 16 <br />
魅力 3173 点 <br />
金钱 605.55 元 <br />
威望 20 点 </div> </li>
</ul>
<a href="http://www.cnblogs.com/cloudgamer/">作者博客</a>，研究前端技术
<script>
var ft = new FixedTips("idTip");
$$A.forEach($$("idTest2").getElementsByTagName("li"), function(o){
ft.add(o.getElementsByTagName("img")[0], {
relative: { customLeft: -16, customTop: -16 },
onShow: function(){ ft.tip.innerHTML = o.innerHTML; }
});
})
</script>
</body>
</html>
