導航:首頁 > 編程語言 > 網頁浮窗代碼

網頁浮窗代碼

 發布時間：2023-03-18 01:07:18

① html中浮動窗口怎麼做啊就是一個小窗口飄在在頁面上那種

浮動窗口可以用js實現。帶關閉窗口的簡單全屏浮動代碼如下：

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>帶關閉按鈕的浮動窗口</title>
</head>
<styletype="text/css">
#fdck{border:1pxsolid#c0c0c0;margin:0auto;padding:5px;background:#f0f0f0}
</style>
<body>
<divid="img"style="position:absolute;left:311;top:815;visibility:hidden;"onmouseover="clearInterval(interval)"onmouseout="interval=setInterval('changePos()',delay)"align="middle">
<spanstyle="CURSOR:hand;color:red;font-weight:bold;font-size:12px"onclick="clearInterval(interval);img.style.visibility='hidden'">關閉</span>
<divid="fdck">
浮動測試TEST
</div>
</div>
<scriptlanguage=javascript>
varxPos=20;
varyPos=document.body.clientHeight;
varstep=1;
vardelay=30;
varheight=0;
varHoffset=0;
varWoffset=0;
varyon=0;
varxon=0;
varpause=true;
varinterval;
img.style.top=yPos;
functionchangePos(){
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);
}
}
functionstart(){
img.style.visibility="visible";
interval=setInterval('changePos()',delay);
}
start();
</script>
</body>
</html>

粘貼到本地一個記事本，保存為HTML格式打開即可看見。

如果只是固定在一個位置不動，可以在div的style設置『position:fixed;』即可。

② 浮動窗口的代碼 （html/js）

第一種方法:
Html代碼
<html>
<head>
<title>浮動窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b");
var overFlow = $("#over");
b.click(function(){
overFlow.fadeIn();
$("#mask").css("background","#111");
$("#mask").css("opacity","0.8");
})
$("#close").click(function(){
overFlow.fadeOut();
$("#mask").css("background","#fff");
$("#mask").css("opacity","1");
});
drag($("#over"),$("#title"));
}) ;
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">這只是一個演示標題</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"> <a id="b" href="#">click</a></div>
</body>
</html>

Js代碼
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt || window.event;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt || window.event;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}

css代碼
#over{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
display: none;
background: #cccccc;
cursor: default;
width: 300px;
z-index: 10;
opacity: 1;
}
#title{
border: 1px solid #1840C4;
background: #95B4DC;
padding: 2px;
font-size:12px;
cursor: default;
}
#close{
cursor: pointer;
margin-right: 1px;
overflow: hidden;
}
#content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
background: #fff;
width: 1024px;
height: 800px;
}
#b{
position: absolute;
left: 200px;
top: 100px;
}
body{
padding: 0px;
margin: 0px;
}
#over{
background: transparent;
}

第二種方法:
消息框遮罩層:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'

頁面載入loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>

關閉浮動窗口:<a href="javascript:hideupload()">關閉窗口建議用小圖片</a>

打開浮動窗口:<a href="javascript:showupload('admin.php')">打開浮動</a>
// 消息框loading
function loading(){
var o = $('#body_loading');
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");
o.fadeIn("fast");
}
// 消息框消失
function loaded(){
var o = $('#body_loading');
o.fadeOut("fast");
}
// 隱藏浮動窗口
function hideupload(){
$('#show_upload').hide();
$('#show_upload_iframe').hide();
}
// 彈出浮動窗口
function showupload(ajaxurl){
loading();
var o=$('#show_upload');
var f=$('#show_upload_iframe');
var top = 200;
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded();
o.html(res);
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
if($(document).scrollTop()>200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);
}
o.css("top",top+"px");
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});
f.show();
o.show();
}
});
}

③ HTML網頁中兩側漂浮小窗口代碼

修改了！你應該是希望滾動條不管在什麼位置 這個層都是可見的對吧？ 最原始的那個可以滾動不可見區域。 晚上我又改了一下 對xxx_div做了一下修改。 看看能否滿足
你的要求
在body的可見區域漂浮！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>經典的js物理彈性漂浮圖片廣告代碼丨芯晴網頁特效丨CsrCode.Cn</title>
</head>

<p class="intro_p"><body style="margin:0;padding:0;">

<div id="xxx_div" style=" left: expression(0); border:0px #ccc solid; WIDTH: 100%; POSITION: absolute; ; TOP: expression(body.scrollTop); HEIGHT: 100%; left: 0px; top: 0px;"></div>
<div>

<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="" width="250" height="60" border="0"></a></DIV>

<div align="center">
<p>
<SCRIPT>
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()
{
var objd = document.getElementById("xxx_div");
//width = document.body.clientWidth;
//height = document.body.clientHeight;
width = objd.clientWidth;
height = objd.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + objd.offsetLeft;
img1.style.top = yPos + objd.offsetTop;
if (yon)

else

if (yPos < 0)

if (yPos >= (height - Hoffset))

if (xon)

else

if (xPos < 0)

if (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>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>js物理彈性漂浮廣告</p>
<p></p>
<p> </p>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>asdsad
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>asdasd
</body>
</html>

下面這個是在指定定的小窗口內飄動，我改了一下測試可以運行：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>經典的js物理彈性漂浮圖片廣告代碼丨芯晴網頁特效丨CsrCode.Cn</title>
</head>

<p class="intro_p"><body>

<div id="xxx_div" style="top:20px; left:50px; width:600px; height:500px; border:2px #ccc solid;"></div>
<div>

<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="" width="250" height="60" border="0"></a></DIV>

<div align="center">
<p>
<SCRIPT>
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()
{
var objd = document.getElementById("xxx_div");
//width = document.body.clientWidth;
//height = document.body.clientHeight;
width = objd.clientWidth;
height = objd.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + objd.offsetLeft;
img1.style.top = yPos + objd.offsetTop;
if (yon)

else

if (yPos < 0)

if (yPos >= (height - Hoffset))

if (xon)

else

if (xPos < 0)

if (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>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>js物理彈性漂浮廣告</p>
<p></p>
<p> </p>
</div>
</body>
</html>

④ DIV懸浮的代碼

在頁面底來部的模板文件，自footer.htm文件添加一段代碼即可。

在</body>標簽前面插入。
例如：
<div id="kefu2">
<div class="cs_qcode">
<img src="http://www.xiulinart.com/Uploads/201608/57aaa0cb70984.jpg" title="用手機微信掃一掃" />
</div>
</div>
<style>
#kefu2{position:fixed; left:0px; bottom:100px; z-index:10008; padding: 10px; background: #fff; font-size: 12px;}
.cs_qcode{padding: 10px 0px 0px 0px;}
</style>

⑤ JS網頁中的浮動窗口代碼

<script>
function scrolls(){
var advobj=document.getElementById("adv");
advobj.style.top=100+document.documentElement.scrollTop+"px";
}
window.onscroll=scrolls;
function winclose(){
var advobj=document.getElementById("adv");
advobj.style.display="none";
}
</script>
<body>
<!--隨滾動條移動的浮動窗口############################-->
<div id="adv" style="">
<img src="圖片路專徑"/>
<div id="close" onclick="winclose()">關閉屬</div>
</div>
<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"scrolling="no"></iframe></div>
</body>

⑥ 如何製作html(網頁)浮動窗口

製作方法：拆改

將下列代碼輸入html軟體

⑦ c++懸浮窗代碼

懸浮窗要點:
a.從QWidget 繼承..沒有工具bar, 狀態bar...當叢慎衫然,從QMainWindowi繼承也能了.
b.去掉標題欄: setWindowFlags( Qt::FramelessWindowHint
c.窗體置頂 setWindowFlags( Qt::WindowStaysOnTopHint
d. 隱藏任務欄圖標 setWindowFlags( Qt::Tool) //工具條模式
e: 背景透明 setAttribute(Qt::WA_TranslucentBackground, true);
f: 添加滑鼠事件滲腔..拖曳..滑鼠動態圖標等.
void mousePressEvent(QMouseEvent *event);
void mouseMoveEvent(QMouseEvent *event);
void paintEvent(QPaintEvent *event);
void enterEvent(QEvent *event);
void leaveEvent(QEvent *event);

2.建立普通窗孝嘩體.
3.懸浮窗增添雙擊事件,

⑧ 如何給網頁加浮窗圖片

iframe調用
，首先做一個頁面
設定後你想浮動的圖片和圖片的鏈接。一般那個頁面都是做一張圖片的
例如<a
href="想鏈接的網站"><ing
src="圖片地址"/></a>在網站頁面通過iframe調用那手頃洞個頁面的代碼如下
，下面的熟悉自己慢慢修改
嘗試一下。<iframe
scrolling="no"
ismove="auto"
fixuptype="float"
fixupwidth="5"
frameborder="0"
width="258"
height="168"
src="那個頁面的地址"></iframe> JS如下：
插入網畢枯站中。。 <script
type="text/javascript"
>
var
fixupLayers=new
function(){
var
i=0,k,f,af=document.getElementsByTagName("iframe");
for(k
in
af){f=af[k]; if(f.nodeName
&&
f.getAttribute("fixuptype")){ if(f.getAttribute("fixuptype")=="float"
&&
f.getAttribute("ismove")
&&
f.getAttribute("ismove")=="auto"){
f.onmouseout=function(){f.ismove="true"};

f.onmouseover=function(){f.ismove="false"};

f.ismove="true";}

f.style.position="absolute";f.style.zIndex=999;this[i]=af[k];i++;}
}this.length=i;}
function
fixup(){
var
ph=document.documentElement.offsetHeight;
var
pw=document.documentElement.offsetWidth;
var
st=document.body.scrollTop;
var
fw,f,ft,lw,lh,mr=5;
for(var
i=0;i<fixupLayers.length;i++){

f=fixupLayers[i];

fw=parseInt(f.getAttribute("fixupwidth"乎鄭));

lw=f.offsetWidth;lh=f.offsetHeight;ft=f.getAttribute("fixuptype");

if(ft=="top")
f.style.pixelTop=st+fw;

else
if(ft=="bottom")
f.style.pixelTop=st+ph-fw-lh-mr;

else
if(ft=="dl")
f.style.pixelTop=st+fw+150;

else
if(ft=="float"
&&
f.getAttribute("ismove")
&&
f.getAttribute("ismove")=="true"){ms=5;
if(f.getAttribute("movespeed"))
ms=parseInt(f.getAttribute("movespeed"));
if(!f.lastX){f.lastX=fw;f.moveX=ms;}

if(!f.lastY){f.lastY=fw;f.moveY=ms;}

f.lastX+=parseInt(f.moveX)-ms*Math.random();

f.lastY+=parseInt(f.moveY)-ms*Math.random();

if(parseInt(f.lastX)>pw-mr-lw-fw){f.lastX=pw-mr-lw-fw;f.moveX=0;}

else
if(parseInt(f.lastX)<mr+fw){f.lastX=mr+fw;f.moveX=ms;}

if(parseInt(f.lastY)>ph-mr-lh-fw){f.lastY=ph-mr-lh-fw;f.moveY=0;}

else
if(parseInt(f.lastY)<mr+fw){f.lastY=mr+fw;f.moveY=ms;}

f.style.pixelTop=parseInt(f.lastY)+st;

f.style.pixelLeft=parseInt(f.lastX);}}}
if(_lf){clearInterval(_lf); var
_lf=window.setInterval("fixup()",100);}else
var
_lf=window.setInterval("fixup()",100);</script>

⑨ 網頁懸浮圖片怎麼寫代碼

左側懸浮代碼如下：
<div style="position:absolute;width:110px;height:455px;top:150px;left:0px;" id="lefimg"><img border="0" src="../圖片名" width="圖片寬度" height="圖片高度" /></div>
<script language="JavaScript">
<!--
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("lefimg").style.top=parseInt(document.getElementById("lefimg").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
window.setInterval("heartBeat()",1);

// -->
</script>
圖片高度和寬度用數字代替即可，層的寬度和高度可自定義
將如上代碼加入到網頁的</body>前即可

⑩ 網頁製作中的彈出窗口代碼

一組常用的彈出窗口用法

以下代碼集合常用的彈出窗口用法。

1、最基本的彈出窗口代碼

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>

代碼放在<SCRIPT LANGUAGE="javascript">標簽和</script>之間。

<!-- 和 -->是對一些版本低的瀏覽器起作用。
window.open ('page.html') 用於控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以，只是不要混用。

這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。

2、經過設置後的彈出窗口

定製這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應該頁面的具體情況。

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//寫成一行
-->
</SCRIPT>

參數解釋：

<SCRIPT LANGUAGE="javascript"> js腳本開始；
window.open 彈出新窗口的命令；
'page.html' 彈出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar，scrollbars 表示菜單欄和滾動欄。
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；
</SCRIPT>
js腳本結束

3、用函數控制彈出窗口

完整的代碼示範

<html>
<head>
<script LANGUAGE="javascript">
<!--
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//寫成一行
}
//-->
</script>
</head>
<body onload="openwin()">
...任意的頁面內容...
</body>
</html>

這里定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。
怎麼調用呢？

方法一：<body onload="openwin()"> 瀏覽器讀頁面時彈出窗口；

方法二：<body onunload="openwin()"> 瀏覽器離開頁面時彈出窗口；

方法三：用一個連接調用：
<a href="#" onclick="openwin()">打開一個窗口</a>
注意：使用的「#」是虛連接。

方法四：用一個按鈕調用：
<input type="button" onclick="openwin()" value="打開窗口">

閱讀全文

與網頁浮窗代碼相關的資料

熱點內容
將圖紙拆分為多個CAD文件 瀏覽：779
如何鑒別dsd文件 瀏覽：902
thinkphp不能用js 瀏覽：664
蘋果11粘膩app是什麼意思 瀏覽：670
安卓手機中木馬了怎麼辦 瀏覽：964
java組建模型 瀏覽：53
wifi萬能密碼安全嗎 瀏覽：785
紅色系圓圈是什麼app 瀏覽：714
迷你編程開始的教程怎麼過 瀏覽：216
上海國衡網站有什麼用 瀏覽：29
掃描文件如何全選 瀏覽：363
directx一鍵修復工具 瀏覽：620
如何恢復谷歌同步中刪除的文件夾 瀏覽：215
安卓51轉換為系統應用 瀏覽：789
哪裡看雙11數據 瀏覽：783
文件變成exe如何恢復 瀏覽：49
為什麼逆戰會缺少文件 瀏覽：180
蘋果4s版本怎麼更新 瀏覽：418
手機網路共享密碼錯誤 瀏覽：535
電腦清理沒用的文件 瀏覽：211

友情鏈接