當前位置:編程學習大全網 - 源碼下載 - 求控制網頁中浮動層不超出屏幕顯示範圍的方法

求控制網頁中浮動層不超出屏幕顯示範圍的方法

當然妳說的意思是妳自己做的網站給別人看的,關鍵代碼如下

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>

  • 上一篇:黑蘋果怎麽裝顯卡驅動
  • 下一篇:Ky源代碼分析
  • copyright 2024編程學習大全網