求控制网页中浮动层不超出屏幕显示范围的方法
类似效果见这个网页:http://military.china.com/zh_cn/top01/11053249/20070711/14212608.html上面网页中有...
类似效果见这个网页:http://military.china.com/zh_cn/top01/11053249/20070711/14212608.html
上面网页中有一个关键字弹出层,能自动根据关键字的位置弹出窗口,如关键字在屏幕显示的顶部,弹出的窗口就会在关键字的下方,而一般位置弹出的窗口就是在关键字的上方,这里说的只是个类似效果
我就是求这个可以自动判断层显示位置而不会超出屏幕显示范围的代码,大家知道像QQ的窗口就可以超出屏幕显示的范围,我需要的就是让层不能超出屏幕显示范围,不知道有没有讲明白,请大家提供一下判断的代码
下面有朋友说在IE工具里面设置,
我的问题不是这样的,这个弹出的窗口是我自己的网页中的,当然要在自己的网页中就设置好,主要是通过判断代码来控制,请高手费心了,谢谢
测试了一下楼下朋友提供的代码,发现问题还是没有得到解决,如果大家有时间,希望能加QQ392836327指点一下,谢谢 展开
上面网页中有一个关键字弹出层,能自动根据关键字的位置弹出窗口,如关键字在屏幕显示的顶部,弹出的窗口就会在关键字的下方,而一般位置弹出的窗口就是在关键字的上方,这里说的只是个类似效果
我就是求这个可以自动判断层显示位置而不会超出屏幕显示范围的代码,大家知道像QQ的窗口就可以超出屏幕显示的范围,我需要的就是让层不能超出屏幕显示范围,不知道有没有讲明白,请大家提供一下判断的代码
下面有朋友说在IE工具里面设置,
我的问题不是这样的,这个弹出的窗口是我自己的网页中的,当然要在自己的网页中就设置好,主要是通过判断代码来控制,请高手费心了,谢谢
测试了一下楼下朋友提供的代码,发现问题还是没有得到解决,如果大家有时间,希望能加QQ392836327指点一下,谢谢 展开
5个回答
展开全部
当然你说的意思是你自己做的网站给别人看的，关键代码如下
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>
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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
查看源代码后看到"金融时报"并没有“服务器端链接”，而是通过客户端进行“关键字”加链接的。也就是说，这种做法除了是广告以外，SEO角度上讲完全没有任何意义。好象和LZ问题无关。呵呵。。。。。确定他这个是JS的以后，就好办了。写一个层<div id="myAdv"></div>，然后CSS控制隐藏。金融 这两个字加JS事件。onmouseover就显示myAdv，onmouseout就隐藏myAdv，LZ说的自动左右而不超出屏幕，原理是这样的：myAdv默认是要显示在“关键字”的上方的。先得到鼠标位置，然后计算如果myAdv在鼠标上方位置出现，是否会“越界”。也就是说鼠标位置 myAdv的高度是否超过容器的位置，如果越过，则按第二种方法，即将myAdv显示在“关键字”的下方即可。。。。我只是说说原理，表达能力也不行。不知道LZ听懂没。呵呵。。。有空倒是可以做做这样的效果了。我发现很多网站都有这种效果来做广告，但是似乎忽略了SEO角度的用处。。。如果我要做，一定先考虑SEO。呵呵。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不写具体的例子代码了, 代码太乱, 看起来也不容易明白. 只说说方法, 具体代码你自己写吧...
1.这个层事先设好, position用absolute, 并隐藏起来. 层的内容根据所点击关键字动态赋值. 赋好值后, 可以根据div1.clientWidth和div1.clientHeight取得该层的高宽.
比如:
<div id="div1" style="position:absolute;display:none;background:infobackground;padding:5;border:1 solid #666666;"></div>
赋值方法: div1.innerHTML = "关键字对应的内容"
宽度: dw = div1.clientWidth
高度: dh = div1.clientHeight
2.获取鼠标或关键字所在的位置.
可以通过鼠标的坐标来得到, 可通过鼠标的click或move事件来得到(分别对应点击和鼠标划过时).
X坐标: mx = event.x
Y坐标: my = event.y
3.计算层的左上角(left, top)位置.
判断, 当X坐标大于层的宽度(mx > dw)时, 层的left 值取 mx-dw, 即在关键字的左侧显示, 反之 left = mx + 关键字的宽度(用关键字对象的clientWidth属性得到), 即在关键字的右侧显示;
判断, 当Y坐标大于层的高度(my > dh)时, 层的top值取 my-dh, 即在关键字的上方显示, 反之 left = my + 关键字的高度(用关键字对象的clientHeight属性得到), 即在关键字的下方显示;
------
注意:
1.取得的鼠标所在坐标, 需要再加上网页滚动的值:
document.body.scrollTop 和 document.body.scrollLeft
2.层的位置计算完毕, 再使用 div.style.display='' 将其显示出来.
3.具体做的时候, 如果层可能覆盖住关键字, 可适当把位置值加上或减去一个校正数, 比如50,20等, 视具体情况而定.
1.这个层事先设好, position用absolute, 并隐藏起来. 层的内容根据所点击关键字动态赋值. 赋好值后, 可以根据div1.clientWidth和div1.clientHeight取得该层的高宽.
比如:
<div id="div1" style="position:absolute;display:none;background:infobackground;padding:5;border:1 solid #666666;"></div>
赋值方法: div1.innerHTML = "关键字对应的内容"
宽度: dw = div1.clientWidth
高度: dh = div1.clientHeight
2.获取鼠标或关键字所在的位置.
可以通过鼠标的坐标来得到, 可通过鼠标的click或move事件来得到(分别对应点击和鼠标划过时).
X坐标: mx = event.x
Y坐标: my = event.y
3.计算层的左上角(left, top)位置.
判断, 当X坐标大于层的宽度(mx > dw)时, 层的left 值取 mx-dw, 即在关键字的左侧显示, 反之 left = mx + 关键字的宽度(用关键字对象的clientWidth属性得到), 即在关键字的右侧显示;
判断, 当Y坐标大于层的高度(my > dh)时, 层的top值取 my-dh, 即在关键字的上方显示, 反之 left = my + 关键字的高度(用关键字对象的clientHeight属性得到), 即在关键字的下方显示;
------
注意:
1.取得的鼠标所在坐标, 需要再加上网页滚动的值:
document.body.scrollTop 和 document.body.scrollLeft
2.层的位置计算完毕, 再使用 div.style.display='' 将其显示出来.
3.具体做的时候, 如果层可能覆盖住关键字, 可适当把位置值加上或减去一个校正数, 比如50,20等, 视具体情况而定.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把网页漂浮的高度和宽度都小于你系统的系统分辨率就行.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在网页的 工具-Internet选项-隐私-设置 中设置
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
