本文目录一览：
- 1、浮动窗口的代码 （html/js）
- 2、怎样用javascript实现带关闭窗口的浮动广告
- 3、在网页中插入浮动窗口，js代码或css代码（易看易懂）
- 4、javascript如何实现弹出浮动窗口
- 5、JS网页中的浮动窗口代码？
浮动窗口的代码 （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();
}
});
}
怎样用javascript实现带关闭窗口的浮动广告
首先浮动的窗口就是一个层，在这个层上放置一个小的层，代表关闭按钮，可以使用背景图片，或者img，用小层装，是为来方便固定位置，在这个小层中可以写js代码，当鼠标点击是获得大层，修改大层的隐藏属性，这样就实现来，整个层的关闭
在网页中插入浮动窗口，js代码或css代码（易看易懂）
给你一段代码，创建了一个大小100*100的浮动窗口，贴着窗口的右边。
css代码：
style type=”text/css”
#my_dialog {
position: fixed; /*固定定位*/
right: 0;
top: 50%; /*贴着右边，垂直位置50%*/
height: 100px;
width: 100px; /*尺寸 100 x 100*/
transform: translate(0, -50%); /*通过位移，保证浮动窗口的垂直居中*/
box-shadow: 0 0 3px 1px rgba(180, 180, 180, 0.5);
background-color: white; /*加些背景色和阴影，以便区分*/
}
/style
html代码：
div id=”my_dialog”
!–窗口内容–
/div
javascript如何实现弹出浮动窗口
html
head
titleJs弹出浮动窗口，支持鼠标拖动和关闭/title
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
script type=”text/javascript”
/**
关于一些参数说明：
*bodycontent:要在窗口显示的内容，dom对象
*title:窗口标题，字符串类型
*removeable:窗口能否拖动，布尔类型
*注意：内容窗体的高度是height-30px，请计算好你要显示的内容的高度和宽度。弹出窗的id为”223238909″，所以你的页面不要再取值为”223238909″的id了，以防js执行出错*/
function createdialog(width,height,bodycontent,title,removeable){
if(document.getElementById(“www_phpstudy_net”)==null){
/*创建窗口的组成元素*/
var dialog = document.createElement(“div”);
var dialogtitlebar= document.createElement(“div”);
var dialogbody = document.createElement(“div”);
var dialogtitleimg = document.createElement(“span”);
var dialogtitle = document.createElement(“span”);
var dialogclose = document.createElement(“span”);
var closeaction = document.createElement(“button”);
/*为窗口设置一个id，id如此怪异是为了尽量避免与其他用户取的id相同而出错*/
dialog.id = “223238909”;
/*组装对话框标题栏,按从里到外的顺序组装*/
dialogtitle.innerHTML = title;
dialogtitlebar.appendChild(dialogtitleimg);
dialogtitlebar.appendChild(dialogtitle);
dialogtitlebar.appendChild(dialogclose);
dialogclose.appendChild(closeaction);
/*组装对话框主体内容*/
if(bodycontent!=null){
bodycontent.style.display = “block”;
dialogbody.appendChild(bodycontent);
}
/*组装成完整的对话框*/
dialog.appendChild(dialogtitlebar);
dialog.appendChild(dialogbody);
/*设置窗口组成元素的样式*/
var templeft,temptop,tempheight//窗口的位置（将窗口放在页面中间的辅助变量）
var dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串
templeft = (document.body.clientWidth-width)/2;
temptop = (document.body.clientHeight-height)/2;
tempheight= height-30;
dialogcssText= “position:absolute;background:#65c294;padding:1px;border:4px;top:”+temptop+”px;left:”+templeft+”px;height:”+height+”px;width:”+width+”px;”;
dialogbodycssText = “width:100%;background:#ffffff;”+”height:” + tempheight + “px;”;
dialog.style.cssText = dialogcssText;
dialogtitlebar.style.cssText = “height:30px;width:100%;background:url(images/titlebar.png) repeat;cursor:move;”;
dialogbody.style.cssText = dialogbodycssText;
dialogtitleimg.style.cssText = “float:left;height:20px;width:20px;background:url(images/40.gif);”+”display:block;margin:4px;line-height:20px;”;
dialogtitle.style.cssText = “font-size:16px;float:left;display:block;margin:4px;line-height:20px;”;
dialogclose.style.cssText = “float:right;display:block;margin:4px;line-height:20px;”;
closeaction.style.cssText = “height:20px;width:24px;border-width:1px;”+”background-image:url(images/close.png);cursor:pointer;”;
/*为窗口元素注册事件*/
var dialogleft = parseInt(dialog.style.left);
var dialogtop = parseInt(dialog.style.top);
var ismousedown = false;//标志鼠标是否按下
/*关闭按钮的事件*/
closeaction.onclick = function(){
dialog.parentNode.removeChild(dialog);
}
/*实现窗口的移动，这段代码很典型，网上很多类似的代码*/
if(removeable == true){
var ismousedown = false;
var dialogleft,dialogtop;
var downX,downY;
dialogleft = parseInt(dialog.style.left);
dialogtop = parseInt(dialog.style.top);
dialogtitlebar.onmousedown = function(e){
ismousedown = true;
downX = e.clientX;
downY = e.clientY;
}
document.onmousemove = function(e){
if(ismousedown){
dialog.style.top = e.clientY – downY + dialogtop + “px”;
dialog.style.left = e.clientX – downX + dialogleft + “px”;
}
}
/*松开鼠标时要重新计算当前窗口的位置*/
document.onmouseup = function(){
dialogleft = parseInt(dialog.style.left);
dialogtop = parseInt(dialog.style.top);
ismousedown = false;
}
}
return dialog;
}//end if(if的结束)
}
/script
style
table{background:#b2d235;}
button{font-size:12px;height:23;background:#ece9d8;border-width:1;}
#linkurl,#linkname,#savelink{width:100px;}
/style
/head
body
!– 显示窗口的地方 —
div id=”here”/diva id=”clickhere” href=”#”点击生成窗口/a
!– 要嵌入到窗口的内容 —
div id=”login” style=”display:none;”
form action=”#” method=”post” onSubmit=”return false;”
table width=”400″ height=”95″
tr
td width=”78″链接文字/td
td width=”168″input name=”link.name” type=”text”//td
td width=”138″ id=”linktext”/td
/tr
tr
td链接地址/td
tdinput name=”link.url” type=”text”//td
td id=”linkurl”/td
/tr
tr
td/td
tdbutton type=”submit” style=”float:right;”添加/button/td
td id=”savelink”/td
/tr
/table
/form
/div
script type=”text/javascript”
var here = document.getElementById(“here”);
var login = document.getElementById(“login”);
var clickhere = document.getElementById(“clickhere”);
clickhere.onclick = function(){
here.appendChild(createdialog(400,95+30,login,”欢迎光临phpstudy”,true));
}
/script
/body
/html
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
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/309451.html
微信扫一扫 
支付宝扫一扫 