网页浮窗代码（悬浮窗代码）

本篇文章给大家谈谈网页浮窗代码，以及悬浮窗代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何制作html(网页)浮动窗口？
• 2、网页制作中的弹出窗口代码
• 3、网页浮动图标的代码是什么，最好是css的
• 4、如何给网页加浮窗图片
• 5、JS网页中的浮动窗口代码？
• 6、浮动窗口的代码 （html/js）

如何制作html(网页)浮动窗口？

制作方法：

将下列代码输入html软件

页面初始化效果：

问题分析：

HTML中的浮动窗口，可以使用CSS的定位方式完成，同时使用这种方式来完成这个功能也是一种较为简单的方式，只需要有HTML以及CSS的知识就可以完成了。

举例如下：

在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。示例中使用的定位方式为：固定定位（fixed），所有它们将永远的跟随页面进行滚动。

超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：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="打开窗口"

网页浮动图标的代码是什么，最好是css的

如果是地址栏的图标，代码如下：

link rel="shortcut icon" href="MyImg.ico" /

link rel="Bookmark" href="favicon.ico" /

代码放置在head/head之间，图片放置在站点根目录。

如果是页面上的某个图标，这个也有多种方法。

一种是float的浮动，不脱离页面内容流。

一种是position，可以脱离页面内容流，独立设置位置。

如果是某些标题，列表前的小图标，则可以使用img添加，如：

img src="..." / a href="..."链接/a

也可以用css的background属性集合padding属性设置为背景。

如何给网页加浮窗图片

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;ifixupLayers.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

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/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"这只是一个演示标题/spanspan 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;"/iframediv 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();

}

});

}

关于网页浮窗代码和悬浮窗代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。