if(MouseX+40+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+40+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
mouseY+40具體加多少妳自己嘗試
我做的壹個彈出層,保存到本地妳試試看,妳要的應該就是這效果的吧。妳看我的代碼適當的參考壹下應該就知道怎麽弄了。
<html>
<head>
<title>shiyan</title>
<style type='text/css'id='defaultPopStyle'>
*{ margin:5px.;padding:0; }
.cPopText { left:200; background-color: #ff5555 ;color: #ffffff ;
border:10px solid #3333cc; margin:10px;solid:#aa0000;bordercolor: #000000;font-size: 18px;height: 40px; padding-right:
10px; padding-left: 10px; padding-top: 4px; padding-bottom: 4px; }
</style>
<style>
h2{ text-align:center;color:red}
#feixue{ text-align:left;font-size:14pt;color:#2222ff;}
</style>
<script language="javascript">
function ss()
{
dypopLayer.style.visibility="visible"
MouseX=event.x;
MouseY=event.y;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+40+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+40+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX-0+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY-80+document.body.scrollTop+popTopAdjust;
}
function s2()
{
dypopLayer.style.visibility="hidden"
}
</script>
</head>
<body>
<h2>shiyan</h2>
<div id="feixue">我的樣式</div>
<div id='dypopLayer' style='position:absolute;z-index:1000;visibility:visibility' class='cPopText'>i love you</div>
<br>
<br>
<br>
<div id="tt" align="left" >
<input type="button" value="團購其他商品" onmousemove=ss() onmouseout=s2() name="button1">
</div>
<div id="tt" align="center" >
<input type="button" value="團購其他商品2" onmousemove=ss() onmouseout=s2() name="button2">
</div>
<div id="tt" align="right" >
<input type="button" value="團購其他商品2" onmousemove=ss() onmouseout=s2() name="button3">?
<input type="button" value="團購其他商品2" onmousemove=ss() onmouseout=s2() name="button4">
</div>
<p style="border:0.2in solid #ff8000;margin:0.5cm;padding:0.2in; background:#c0c0c0" >
"border:0.2in solid #ff8000;"為壹整體中間不能有“;”
</p>
</body>
</html>