关于弹出div的位置判断问题~！50分

Question

如果
(获取页面的宽-(点击div的位置+自身的宽))<弹出的div的宽这下，你明白了吧....

Answer 1

<script language="javascript" type="text/javascript">
var oo = true
function create(obj,ad)
{
if(oo==true)
{
oo=false
var div =document.createElement("div")
var z = "<div><table><tr width='200' border='0'><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6" + ad + "</td></tr></table></div>"
div.className="f"
div.id="div"
div.innerHTML=z
document.body.appendChild(div)
var left=obj.offsetLeft
var top=obj.offsetTop
var width=obj.offsetWidth
while (obj=obj.offsetParent) 
{
left += obj.offsetLeft;
top += obj.offsetTop;
};
}
document.getElementById("div").style.left=left+width
document.getElementById("div").style.top=top
div.onmouseout=del  
}
function del(e){
e=e||event;
var obj=e.relatedTarget||e.toElement;
var div =document.getElementById("div")
if(div.contains(obj))return;
document.body.removeChild(div)
oo=true
}全代码

Answer 2

不大可能做到完整的判断  浏览器的宽度也可能比显示的div要小。
<style type="text/css">
.f{
cursor:pointer;
position:absolute;
width:357px;
height:194px;
padding:15px 0 0 50px;
background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg)
}
</style>
<script>
var oo = true
var vv=["大法师</a><br>山丘之王<br>血法师<br>怕拉丁","剑圣<br>先知<br>牛头人<br>小yy","死亡骑士<br>巫妖<br>恐惧魔王<br>小强","恶魔猎手<br>丛林守护者<br>守望者<br>老虎女继嗣"]
function create(obj,num){
if(oo==true){
oo=false
var div =document.createElement("div")
div.className="f"
div.id="div"
div.innerHTML=vv[num]
document.body.appendChild(div)
var left=obj.offsetLeft
var top=obj.offsetTop
var width=obj.offsetWidth
var a = obj
while (obj=obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
};if((document.body.clientWidth-left-a.offsetWidth)>document.getElementById("div").offsetWidth)
  {
     document.getElementById("div").style.left=left+width
     document.getElementById("div").style.top=top  }
else
  {
     document.getElementById("div").style.left=left- document.getElementById("div").offsetWidth
     document.getElementById("div").style.top=top
  }
div.onmouseout=del
}}function del(e){
e=e||event;
var obj=e.relatedTarget||e.toElement;
var div =document.getElementById("div")
if(div.contains(obj))return;
document.body.removeChild(div)
oo=true
}</script>
<span  id="text" onmouseover="create(this,0)" style="cursor:pointer;" onMouseOut="del()" >人族</span>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
<span  id="text" onmouseover="create(this,1)" style="cursor:pointer;" onMouseOut="del()" >兽族</span><br><br><br><br><br><br><br><br><br><br><br><br>
<span  id="text" onmouseover="create(this,2)" style="cursor:pointer;" onMouseOut="del()" >不死族</span><br><br><br><br><br><br><br><br><br><br><br>
<span  id="text" onmouseover="create(this,3)" style="cursor:pointer;" onMouseOut="del()" >精灵族</span><br><br><br><br><br><br><br><br><br><br><br>

Answer 3

document.body.appendChild(div)
var left=obj.offsetLeft
var top=obj.offsetTop
var width=obj.offsetWidth
var allwidth = document.body.offsetWidth;
var allheight = document.body.offsetHeight;
while (obj=obj.offsetParent) 
{
left += obj.offsetLeft;
top += obj.offsetTop;
};
}
var objdiv = document.getElementById("div");
divwidth = objdiv.offsetWidth;
divheight = objdiv.offsetHeight;
if(left + width + divwidth <= allwidth){
document.getElementById("div").style.left=left+width;
}else{
document.getElementById("div").style.left=left-divwidth;
}
if(top + divheight <= allheight){
document.getElementById("div").style.top=top
}else{
document.getElementById("div").style.top=top - divheight;
}
div.onmouseout=del
}