导航:首页 > 万维百科 > 网站悬浮窗口设计

网站悬浮窗口设计

 发布时间：2020-09-24 20:24:15

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

浮动窗口可以用js实现。带关闭窗口的简单全屏浮动代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带关闭按钮的浮动窗口</title>
</head>
<style type="text/css">
#fdck {border:1px solid #c0c0c0;margin:0 auto;padding:5px;background:#f0f0f0}
</style>
<body>
<div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">
<span style="CURSOR:hand;color:red;font-weight:bold;font-size:12px" onclick="clearInterval(interval);img.style.visibility = 'hidden'">关闭</span>
<div id="fdck">
浮动测试TEST
</div>
</div>
<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>
</body>
</html>

粘贴到本地一个记事本，保存为HTML格式打开即可看见。

如果只是固定在一个位置不动，可以在div的style设置‘position:fixed;’即可。

2、请问在网页中随机游动的悬浮窗口如何制作

<!--将以下代码加入HTML的<Body></Body>之间-->

<div id="img" style="position:absolute;">
<img src="这里填写图片的地址"
onClick="pause_resume();">
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
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.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
// End -->
</script>

3、网页里的漂浮对话框怎么做?

示例： http://www.ijavascript.cn/tools/codedemo/jsad-code-float-right-221/demo1.htm 下载地址： http://www.ijavascript.cn/tools/codedemo/jsad-code-float-right-221/jsad-code-float-right-221.zip 把例子的窗口改改就行

4、网页漂浮框制作

对……上面那个回答也是，可以的……你在百度中搜索也可以找到的……网站上漂浮代码……
希望采纳

5、html中如何做悬浮的窗口

转出来给高手解答！
微博里高手多的是！

6、在一个网页中怎样做一个悬浮窗口，并在右上角有关闭按钮的。

1、首先打开dw之后，新建一个html简单项目，输入项目名称后，就能新建一个html文件了。

2、这时候在dw中就可以看到简单的基本代码，此时就能添加按钮并设置跳转页面。

3、为了测试点击按钮跳转的测试，在这里利用button标签新建一个按钮。

4、然后在这里可以添加一个a标签，然后编写一个测试的Http地址。

5、但是只要测试，对于href属性，只要写上一个井号就能测试按钮的跳转。

6、最后在这里按下预览这个命令按钮，就能成功开始测试在dw中，按钮跳转页面的命令。

7、html怎么实现这网页中的悬浮窗？

在这里有教程啊，网页链接，你自己看看吧。

8、网页悬浮窗怎么弄

这个悬浮窗是一个div层，在这个div里面添加一个按钮或者 关闭都可以，'MyDiv'就是悬浮窗div的id，js里面写个函数即可 function CloseDiv(div) { document.getElementById(div).style.display = 'none'; };若有不妥，请补充！

与网站悬浮窗口设计相关的知识