導航:首頁 > 萬維百科 > 網站懸浮窗口設計

網站懸浮窗口設計

 發布時間：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'; };若有不妥，請補充！

與網站懸浮窗口設計相關的知識