网页漂浮窗口代码（网页中如何加入悬浮窗口能一直悬浮在浏览器某个地方的）

本文目录

• 网页中如何加入悬浮窗口能一直悬浮在浏览器某个地方的
• 在网页中插入浮动窗口，js代码或css代码（易看易懂）
• html中浮动窗口怎么做啊就是一个小窗口飘在在页面上那种

网页中如何加入悬浮窗口能一直悬浮在浏览器某个地方的

　　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、最后查看一下浮动窗口的效果，会发现浮动窗口在网页中不断的移动，当鼠标悬停其上时会停止移动，点击“隐藏”按钮将自动隐藏悬浮窗口。

在网页中插入浮动窗口，js代码或css代码（易看易懂）

《div id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
visibility: visible;"》《a href="#" target="_blank"》《img src="2.gif" width="80" height="80" border="0"》《/a》《/div》
《script language="javascript"》
var xPos = 300;
var yPos = 200;
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;
img1.style.top = yPos;
function changePos()
{
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + document.body.scrollLeft;
img1.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()
{
img1.visibility = "visible";
interval = setInterval(’changePos()’, delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval(’changePos()’,delay);
pause = true;
}
}
start();
《/script》

html中浮动窗口怎么做啊就是一个小窗口飘在在页面上那种

问题分析：

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;
}

页面初始化效果：