1. 什么叫浮动窗口
一般激春说来，用于弹出、可移动的独立窗口、frame、div等类似实现提尘铅梁示、通告等功能，通称为“浮动窗口”派运
2. javascript 关于浮动窗口
设置你的浮动窗口的style="position : relative; left: ?px; top: ?px;"
第一种方法:
Html代码
<html>
<head>
<title>浮动窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b");
var overFlow = $("#over");
b.click(function(){
overFlow.fadeIn();
$("#mask").css("background","#111");
$("#mask").css("opacity","0.8");
})
$("#close").click(function(){
overFlow.fadeOut();
$("#mask").css("background","#fff");
$("#mask").css("opacity","1");
});
drag($("#over"),$("#title"));
}) ;
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"> <a id="b" href="#">click</a></div>
</body>
</html>
Js代码
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt || window.event;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt || window.event;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}
css代码
#over{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
display: none;
background: #cccccc;
cursor: default;
width: 300px;
z-index: 10;
opacity: 1;
}
#title{
border: 1px solid #1840C4;
background: #95B4DC;
padding: 2px;
font-size:12px;
cursor: default;
}
#close{
cursor: pointer;
margin-right: 1px;
overflow: hidden;
}
#content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
background: #fff;
width: 1024px;
height: 800px;
}
#b{
position: absolute;
left: 200px;
top: 100px;
}
body{
padding: 0px;
margin: 0px;
}
#over{
background: transparent;
}
第二种方法:
消息框遮罩层:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'
页面加载loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>
关闭浮动窗口:<a href="javascript:hideupload()">关闭窗口建议用小图片</a>
打开浮动窗口:<a href="javascript:showupload('admin.php')">打开浮动</a>
// 消息框loading
function loading(){
var o = $('#body_loading');
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");
o.fadeIn("fast");
}
// 消息框消失
function loaded(){
var o = $('#body_loading');
o.fadeOut("fast");
}
// 隐藏浮动窗口
function hideupload(){
$('#show_upload').hide();
$('#show_upload_iframe').hide();
}
// 弹出浮动窗口
function showupload(ajaxurl){
loading();
var o=$('#show_upload');
var f=$('#show_upload_iframe');
var top = 200;
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded();
o.html(res);
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
if($(document).scrollTop()>200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);
}
o.css("top",top+"px");
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});
f.show();
o.show();
}
});
}
4. 网页中如何加入悬浮窗口能一直悬浮在浏览器某个地方的。
1、首先创建一个名为“topwindows.html”的网页文件，其中的内容将被展示主页浮动窗口中。
2、网页浮动窗口对应的部分代码如下所示：
<html>
<style>
.img_wd{
font-size:30;padding-top:20px;
text-align:left;padding-left:70px;line-height:40px;
background:url(110.jpg) top center no-repeat;
width:252px;height:127px;line-heiht:10px;
text-align:center;
font-family:"微软雅黑,仿宋,楷体,黑体"
color: #fafafa;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
}
</style>
<body>
<div class="img_wd" style="">
青春就是这么任性！<Br>
Younger GOOD
</div>
</body>
</html>
3、接着将如图所示的代码添加到主页<Body>和</Body>之间：
其中标签"fdck”中的属性SRC指向浮动窗口的网页地址。
<div id="img" style="position: absolute;visibility :hidden;padding:0px;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">
<span style="CURSOR:hand;color:red;font-weight:bold;font-align:center;font-size:12px;padding-left:0px;" onclick="clearInterval(interval);fdck.style.visibility = 'hidden';img.style.visibility = 'hidden';">隐藏</span>
<div id="fdck" style="width:100%; height:100%; font-align:center; visibility:visible;border：0px; background-color: no">
<iframe width=320 height=150 src="topWindows.html" frameborder=no scrolling="no">
</iframe>
</div>
</div>
4、接下来需要添加浮动窗口随时运行的行为，对应代码如下：
<script language=javascript>
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {yPos = yPos + step;}
else {yPos = yPos - step;}
if (yPos < 0) {yon = 1;yPos = 0;}
if (yPos >= (height - Hoffset)) {yon = 0;
yPos = (height - Hoffset);}
if (xon) {xPos = xPos + step;}
else {xPos = xPos - step;}
if (xPos < 0) {xon = 1;xPos = 0;}
if (xPos >= (width - Woffset)) {xon = 0;xPos = (width - Woffset);}
}
function start() {
img.style.visibility = "visible";
interval = setInterval('changePos()', delay);}
start();
</script>
5、在此需要说明一点，需要将以上所有代码（包括JS脚本）全部放置在<body>和</body>之间。
6、最后查看一下浮动窗口的效果，会发现浮动窗口在网页中不断的移动，当鼠标悬停其上时会停止移动，点击“隐藏”按钮将自动隐藏悬浮窗口。
5. 如图，如何在网页中用Javascript实现该图片沿窗口四周循环浮动，求详细代码
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>_</title>
<styletype="text/css">
,body{margin:0;padding:0;height:100%;}
#img1{position:absolute;}
</style>
<scriptsrc="http://libs..com/jquery/1.11.1/jquery.min.js"></script>
</head>
<scripttype="text/javascript">
$(function(){
vardir=1,size=10,interval=30;
varwidth=$(document.body).width(),height=$(document.body).height();
varimg=$("#img1"),w=img.width(),h=img.height(),offset=img.offset();
setInterval(function(){
switch(dir){
case1:
offset.left+=size;
if(offset.left+w>=width){
offset.left=width-w;
dir++;
}
break;
case2:
offset.top+=size;
if(offset.top+h>=height){
offset.top=height-h;
dir++;
}
break;
case3:
offset.left-=size;
if(offset.left<=0){
offset.left=0;
dir++;
}
break;
case4:
offset.top-=size;
if(offset.top<=0){
offset.top=0;
dir++;
}
break;
}
if(dir>4){
dir=1;
}
img.offset(offset);
},interval);
$(window).resize(function(){
width=$(document.body).width();
height=$(document.body).height();
});
});
</script>
<body>
<imgid="img1"src="star.jpg"/>
</body>
</html>
6. JSP中怎么实现点击链接然后出现浮动的窗口
那个只是js打开div的效果，和struts2无关。
<a href="javascript:show()" >打开窗口</a>
<div id="d1" style="display:none;">内容</div>
<script>
var show=function(){
document.getElementById("d1").style.display="";
}
</scirpt>
当然我这个是最简单的功能示例。
7. javascript如何实现弹出浮动窗口
<html>
<head>
<title>Js弹出浮动窗口，支持鼠标拖动和关闭</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
/**
关于一些参数说明：
*bodycontent:要在窗口显示的内容，dom对象
*title:窗口标题，字符串类型
*removeable:窗口能否拖动，布尔类型
*注意：内容窗体的高度是height-30px，请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909"，所以你的页面不要再取值为"223238909"的id了，以防js执行出错*/
functioncreatedialog(width,height,bodycontent,title,removeable){
if(document.getElementById("www_phpstudy_net")==null){
/*创建窗口的组成元素*/
vardialog=document.createElement("div");
vardialogtitlebar=document.createElement("div");
vardialogbody=document.createElement("div");
vardialogtitleimg=document.createElement("span");
vardialogtitle=document.createElement("span");
vardialogclose=document.createElement("span");
varcloseaction=document.createElement("button");
/*为窗口设置一个id，id如此怪异是为了尽量避免与其他用户取的id相同而出错*/
dialog.id="223238909";
/*组装对话框标题栏,按从里到外的顺序组装*/
dialogtitle.innerHTML=title;
dialogtitlebar.appendChild(dialogtitleimg);
dialogtitlebar.appendChild(dialogtitle);
dialogtitlebar.appendChild(dialogclose);
dialogclose.appendChild(closeaction);
/*组装对话框主体内容*/
if(bodycontent!=null){
bodycontent.style.display="block";
dialogbody.appendChild(bodycontent);
}
/*组装成完整的对话框*/
dialog.appendChild(dialogtitlebar);
dialog.appendChild(dialogbody);
/*设置窗口组成元素的样式*/
vartempleft,temptop,tempheight//窗口的位置（将窗口放在页面中间的辅助变量）
vardialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串
templeft=(document.body.clientWidth-width)/2;
temptop=(document.body.clientHeight-height)/2;
tempheight=height-30;
dialogcssText="position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;";
dialogbodycssText="width:100%;background:#ffffff;"+"height:"+tempheight+"px;";
dialog.style.cssText=dialogcssText;
dialogtitlebar.style.cssText="height:30px;width:100%;background:url(images/titlebar.png)repeat;cursor:move;";
dialogbody.style.cssText=dialogbodycssText;
dialogtitleimg.style.cssText="float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;";
dialogtitle.style.cssText="font-size:16px;float:left;display:block;margin:4px;line-height:20px;";
dialogclose.style.cssText="float:right;display:block;margin:4px;line-height:20px;";
closeaction.style.cssText="height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;";
/*为窗口元素注册事件*/
vardialogleft=parseInt(dialog.style.left);
vardialogtop=parseInt(dialog.style.top);
varismousedown=false;//标志鼠标是否按下
/*关闭按钮的事件*/
closeaction.onclick=function(){
dialog.parentNode.removeChild(dialog);
}
/*实现窗口的移动，这段代码很典型，网上很多类似的代码*/
if(removeable==true){
varismousedown=false;
vardialogleft,dialogtop;
vardownX,downY;
dialogleft=parseInt(dialog.style.left);
dialogtop=parseInt(dialog.style.top);
dialogtitlebar.onmousedown=function(e){
ismousedown=true;
downX=e.clientX;
downY=e.clientY;
}
document.onmousemove=function(e){
if(ismousedown){
dialog.style.top=e.clientY-downY+dialogtop+"px";
dialog.style.left=e.clientX-downX+dialogleft+"px";
}
}
/*松开鼠标时要重新计算当前窗口的位置*/
document.onmouseup=function(){
dialogleft=parseInt(dialog.style.left);
dialogtop=parseInt(dialog.style.top);
ismousedown=false;
}
}
returndialog;
}//endif(if的结束)
}
</script>
<style>
table{background:#b2d235;}
button{font-size:12px;height:23;background:#ece9d8;border-width:1;}
#linkurl,#linkname,#savelink{width:100px;}
</style>
</head>
<body>
<!--显示窗口的地方-->
<divid="here"></div><aid="clickhere"href="#">点击生成窗口</a>
<!--要嵌入到窗口的内容-->
<divid="login"style="display:none;">
<formaction="#"method="post"onSubmit="returnfalse;">
<tablewidth="400"height="95">
<tr>
<tdwidth="78">链接文字</td>
<tdwidth="168"><inputname="link.name"type="text"/></td>
<tdwidth="138"id="linktext"></td>
</tr>
<tr>
<td>链接地址</td>
<td><inputname="link.url"type="text"/></td>
<tdid="linkurl"></td>
</tr>
<tr>
<td></td>
<td><buttontype="submit"style="float:right;">添加</button></td>
<tdid="savelink"></td>
</tr>
</table>
</form>
</div>
<scripttype="text/javascript">
varhere=document.getElementById("here");
varlogin=document.getElementById("login");
varclickhere=document.getElementById("clickhere");
clickhere.onclick=function(){
here.appendChild(createdialog(400,95+30,login,"欢迎光临phpstudy",true));
}
</script>
</body>
</html>
8. Javascript按钮点击浮动窗口，需要能在父窗口的范围内随机移动（不超出父窗口的位置范围）
按照如下修败让闭改函察裂数b应该就可以了
function b(){
new_screenX = window.screenX + Math.random()*(800-200);
new_screenY = window.screenY + Math.random()*(600-200);
window.open("b.html","浮动窗口滑答","toolbar=1, location=1, status=0, menubar=1,width=200,height=200,screenX="+new_screenX+",screenY="+new_screenY);
}
9. 怎样用javascript实现带关闭窗口的浮动广告
首先浮动的窗口就是一个层，在这个层上放置一个小的层，代表关闭按钮，可以使用背景图片内，或者img，用小层装容，是为来方便固定位置，在这个小层中可以写js代码，当鼠标点击是获得大层，修改大层的隐藏属性，这样就实现来，整个层的关闭
10. 求问JAVASCRIPT如何制作网页浮动小窗口
静态的你会写吧？先把静态的写出来，再根据你点击的更多信息的项目来确定弹窗中的展示内容。关闭按钮用一个图片，给它设置点击事件，点击它的时候整个弹窗隐藏。