问题分析：
HTML中的浮动窗口，可以使用CSS的定位方式完成，同时使用这种方式来完成这个功能也是一种较为简单的方式，只需要有HTML以及CSS的知识就可以完成了。
举例如下：
在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。示例中使用的定位方式为：固定定位（fixed），所有它们将永远的跟随页面进行滚动。
HTML代码：
<div id="left"><p>我是左侧浮动窗口的内容</p>
</div>
<div id="right">
<p>我是右侧浮动窗口的内容</p>
</div>
CSS代码：
body{/*
* 为body标签设置背景仅仅是为了演示效果。
* 与浮动窗口本身无关。
*/
background-color: #ccc
}
#left, #right{
position: fixed
top: 100px
width: 200px
height: 500px
line-height: 500px
text-align: center
border: 1px solid #000
background-color: #FFF
}
#left{
left: 50px
}
#right{
right: 50px
}
页面初始化效果：
楼上的解答基本正确咯你可以使用css来浮动一个块，建议为浮动div，相关的关键样式为position: fixed，是指布局方式为固定的，为了防止被遮挡一般要搭配z-index:999或者更大的数字，表示该层高度，默认为1。如果一个元素的z-index小于其他元素且位置冲突的话就会被遮挡咯。
然后就是位置的问题，这个可以自行调整啦。
1、首先创建一个名为“topwindows.html”的网页文件，其中的内容将被展示主页浮动窗口中。2、网页浮动窗口对应的部分代码如下所示：
<html>
<style>
.img_wd{
font-size:30padding-top:20px
text-align:leftpadding-left:70pxline-height:40px
background:url(110.jpg) top center no-repeat
width:252pxheight:127pxline-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: absolutevisibility :hiddenpadding:0px" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">
<span style="CURSOR:handcolor:redfont-weight:boldfont-align:centerfont-size:12pxpadding-left:0px" onclick="clearInterval(interval)fdck.style.visibility = 'hidden'img.style.visibility = 'hidden'">隐藏</span>
<div id="fdck" style="width:100%height:100%font-align:centervisibility:visibleborder：0pxbackground-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 = 1yPos = 0}
if (yPos >= (height - Hoffset)) {yon = 0
yPos = (height - Hoffset)}
if (xon) {xPos = xPos + step}
else {xPos = xPos - step}
if (xPos <0) {xon = 1xPos = 0}
if (xPos >= (width - Woffset)) {xon = 0xPos = (width - Woffset)}
}
function start() {
img.style.visibility = "visible"
interval = setInterval('changePos()', delay)}
start()
</script>
5、在此需要说明一点，需要将以上所有代码（包括JS脚本）全部放置在<body>和</body>之间。
6、最后查看一下浮动窗口的效果，会发现浮动窗口在网页中不断的移动，当鼠标悬停其上时会停止移动，点击“隐藏”按钮将自动隐藏悬浮窗口。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）