提问帖:http://topic.csdn.net/u/20081218/10/9b08d8f4-e2cc-4aff-93d9-fd57625cf568.html
下载这个试试
http://topic.csdn.net/u/ui/scripts/Csdn/Forum/UserOnline1.js
- <a href="http://hi.csdn.net/jxyxhz" target="_blank" title="进入用户个人空间"> <img src="http://avatar.profile.csdn.net/3/A/6/2_jxyxhz.jpg" onmouseover="javascript:try{showUserCard(event,'jxyxhz')}catch(ex){};" alt="进入用户个人空间"> </a>
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>无标题页</title>
- <script type="text/javascript">
- //显示div
- function outw(o)
- {
- var left,top;
- var obj=document.getElementById("out")
- obj.style.display="block";
- var z=getxy(o);//这里是一个数组。
- //下面的作用是计算在哪个方位显示层,根据滚动条判断。
- var h=obj.style.height.replace('px','');
- if((z[1]-getlt().top)>h)
- {
- top=z[1]-h+'px';
- }
- else
- {
- top=z[1]+'px';
- }
- var w=obj.style.width.replace('px','');
- var r=document.body.clientWidth-getlt().left-w-z[0];
- //alert(document.body.clientWidth+'eee'+getlt().left+'ddd'+w+'ccc'+z[0]);
- if(r>w)
- {
- left=z[0]+z[2]+'px';
- }
- else
- {
- left=z[0]-w+'px';
- }
- obj.style.top=top;
- obj.style.left=left;
- }
- //取得滚动条逝去
- function getlt()
- {
- var top,left;
- top=document.documentElement.scrollTop;
- left=document.documentElement.scrollLeft;
- return {top:top,left:left};//调用方法:getlt().top
- }
- //取得坐标
- function getxy(e)
- {
- l=e.offsetLeft;
- t=e.offsetTop;
- r=e.offsetRight;
- b=e.offsetBottom;
- w=e.offsetWidth;
- h=e.offsetHeight;
- while(ee=e.offsetParent)//循环计算,全部父层,取得正确坐标。
- {l+=e.offsetLeft;t+=e.offsetTop;}
- return [l,t,w,h]//返回一个数组。
- }
- //隐藏
- function fhidden(o)
- {
- document.getElementById("out").style.display="none";
- }
- </script>
- </head>
- <body>
- <div style="height:120px;width:250px;text-align:center;position:absolute;left:20px;top:20px;display:none;background:blue;" id="out">
- <img src="images/login.gif" height="100px" style="padding:5px;" />
- </div>
- <div style="overflow:auto;width:300px;">
- 学习js
- <a href="#" onmouseover="outw(this)" onmouseout="fhidden(this)">技术特点</a>
- 学习js
- </div>
- </body>
- </html>