<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用JavaScript显示浮动窗口</title>
<script>
function showwin(){
var windNode = document.getElementById("win");
windNode.style.display = "block";
}
function hide(){
var windNode = document.getElementById("win");
windNode.style.display = "none";
}
function movecbtn(){
var clo = document.getElementById("close");
clo.style.backgroundColor = "#00FF00";
clo.style.color = "#000000";
}
function moutcbtn(){
var clo = document.getElementById("close");
clo.style.backgroundColor = "#000000";
clo.style.color = "#00FF00";
}
/*以下JavaScript代码用于使鼠标拖动窗口*/
funs={
index:100,
getFocus:function (target){
if(target.style.zIndex!=this.index){
this.index += 2;
var idx = this.index;
target.style.zIndex=idx;
}
},
abs:function (element) {
var result = { x: element.offsetLeft, y: element.offsetTop};
element = element.offsetParent;
while (element) {
result.x += element.offsetLeft;
result.y += element.offsetTop;
element = element.offsetParent;
}
return result;
}
};
function Endrag(source,target,offSetX, offSetY){
source=typeof(source)=="object" ? source:document.getElementById(source);
target=typeof(target)=="object" ? target:document.getElementById(target);
var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100,NS=(navigator.appName=='Netscape');
offSetX=typeof offSetX== "undefined" ? 0:offSetX;
offSetY=typeof offSetY== "undefined" ? 0:offSetY;
source.onmousedown=function(e){
e = e ? e : (window.event ? window.event : null);
funs.getFocus(target);
if(e.button==(NS)?0 :1) {
if(!NS){this.setCapture()}
x0 = e.clientX ;
y0 = e.clientY ;
x1 = parseInt(funs.abs(target).x);
y1 = parseInt(funs.abs(target).y);
moveable = true;
}
};
//拖动;
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null);
if(moveable){
target.style.left = (x1 + e.clientX - x0 - offSetX) + "px";
target.style.top = (y1 + e.clientY - y0 - offSetY) + "px";
}
};
//停止拖动;
source.onmouseup=function (e){
if(moveable) {
if(!NS){this.releaseCapture();}
moveable = false;
}
};
}
</script>
<style>
#win{
border:1px #00F solid;
/*窗口大小*/
width:300px;
height:200px;
/*窗口位置*/
position:absolute; /*绝对定位*/
top:100px;
left:200px;
/*窗口开始不可见*/
display:none;
border-width:3px;
background-color:#000000;
}
#title{
background-color:#00F;
color:#0F0;
font-size:20px;
/*控制标题栏左内边框*/
padding-left:3px;
height:28px;
cursor:default;
}
#content{
padding-left:3px;
padding-top:5px;
}
/*控制关闭按钮的未知*/
#close{
/*使关闭按钮向右移动*/
margin-left: 200px;
/*鼠标放在关闭按钮时鼠标显示手形*/
cursor:pointer;
background-color:#000;
color:#0F0;
}
</style>
</head>
<body _disibledevent=>
<a _disibledevent=>
<div id="win">
<div id="title"><b>标题栏</b><span id="close" _disibledevent=>
<div id="content" align="center"><font color="#CC00FF"><b>这是一个窗口！！！</b></font></div>
</div>
</body>
</html>
最新评论