导航:首页 > 编程语言 > 网页浮窗代码

网页浮窗代码

 发布时间：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="打开窗口">

阅读全文

与网页浮窗代码相关的资料

热点内容
umeng打包工具 浏览：765
g76锥度牙怎么编程 浏览：430
win10企业版关机很慢 浏览：163
微信短视频是保存在哪个文件夹 浏览：985
win10打印机设置纸张大小设置 浏览：427
卫星测控数据有哪些 浏览：451
格式工厂330教程 浏览：421
童美编程课怎么样 浏览：40
网页代码调试器 浏览：54
读取文件string 浏览：500
ug自动编程软件怎么画数控图 浏览：920
什么网站可以介绍主机 浏览：340
移动短信查询代码 浏览：192
怎么看公司网络是什么时候开通 浏览：960
cad2015文件参照怎么关闭 浏览：678
最小二乘逼近程序 浏览：610
铁路12306密码找不回 浏览：352
默认网络覆盖的脑区 浏览：319
itunes恢复iphone教程 浏览：292
炉石现在是什么版本 浏览：825

友情链接