導航:首頁 > 萬維百科 > 網頁浮動窗設計

網頁浮動窗設計

發布時間:2020-09-22 12:25:52

1、如何製作html(網頁)浮動窗口?

製作方法:

將下列代碼輸入html軟體

頁面初始化效果:

2、網頁製作窗口中浮動圖片怎樣做?

圖片轉換為IP連接的形式插入網站中
加入代碼

3、網頁可用滑鼠移動的浮動窗口怎麼製作

這是生成的一個DIV類的對象.
在網上有很多的類似的模式窗口插件,baidu一下,就可以看到很多.

4、html(網頁)浮動窗口,如何製作html(網頁)浮動窗口?

浮動窗口可以很簡單的弄個,就是一個div 樣式<div style=" position:fixed; top:50%; left:50%; width:100px; height:50px; margin:-25px 0 0 -50px; ">內容</div>

5、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;』即可。

6、如何在網頁中設計一個浮動窗口

這里有一個浮動層效果
能自定義定位並隨屏滾動而不抖動
還可以設置居中
裡面有教程和源碼

7、網頁中的浮動窗口怎樣製作,要用什麼軟體?

1.新建一個HTLM的網頁.
2.轉到"布局"面板,選中"繪制層"按扭,在網頁上面畫一個圖層
3.然後,在圖層里放入你想要的內容,比如一張圖片等.
4.再次,在窗口欄中,將"時間軸"掉出來.也可Alt+F9.
5.這步最關鍵,將你繪制的圖層用滑鼠拖到時間軸上(注意是"拖動"哦),然後將時間上面的選項"自動播放"和"循環"勾起.
6.最後一步.在時間軸第一楨上,點擊滑鼠左鍵,選中"錄制層路徑",然後在網頁上拖動你畫的圖層.這時你會看見拖動圖層後面有些小點,那麼恭喜你,你這時是在繪制浮動廣告的路徑,繪完後,保存.預覽.完成了.(若想直線運動,可在針上點左鍵,選"添加關鍵針",再到網頁上移動圖層即可,如你懂FLASH,那就簡單了)

8、html里怎麼製造浮動窗口?

需要浮動的話,只需要在樣式上的position設置fixed即可。
比如:
<div style="position:fixed; z-index:1;">

</div>
這樣寫就浮動了,然後只需要用top、bottom、left、right來定位就行了

如果需要飄來飄去的浮動,需要配合js來完成,js可以去牛圖庫上找,裡面有很多插件,改下樣式就可以使用了。

9、有的網頁上有一個可以隨著窗口的浮動圖片怎麼做

是這個?
網頁上的浮動窗口代碼 body 中間加:
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//載入頁面後,調用函數initAd()
</SCRIPT>
<script language="JScript">
<!--
function initAd() {
document.all.AdLayer.style.posTop = -200;//設置onLoad事件激發以後,廣告層相對於固定後的y方向位置
document.all.AdLayer.style.visibility = 'visible'//設置層為可見
MoveLayer('AdLayer');//調用函數MoveLayer()
}
function MoveLayer(layerName) {
var x = 1;//浮動廣告層固定於瀏覽器的x方向位置
var y = 1;//浮動廣告層固定於瀏覽器的y方向位置
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posLeft = x");//移動廣告層
setTimeout("MoveLayer('AdLayer');", 20);//設置20毫秒後再調用函數MoveLayer()
}
//-->
</script>

<!--下面為一個ID為AdLayer的層(如ID名不為AdLayer,上面MoveLayer()內的AdLayer也要作相應修改),包括一張帶鏈接的圖片-->

<div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 7px; top: 3px'>
<a href="http://10.69.63.103/zjjt/index.htm">
<img src='http://10.69.63.103/zjjt/BS02064_.gif' border="0"></a>
</div>

與網頁浮動窗設計相關的知識