<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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("winTuo");
windNode.style.display = "inline";
}
function hide(){
var windNode = document.getElementById("winTuo");
windNode.style.display = "none";
}
/*以下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.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=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 οnlοad="var i=new Endrag('title',winTuo',0,0);">
<a οnclick="showwin()" href="#">点我</a>
<div id="winTuo">
<div id="title"><b>鼠标点击这里才能拖动</b><span id="close" οnclick="hide()" >关闭</span></div>
<div id="content" align="center"><font color="#CC00FF"><b>这是显示拖动内容，可放入表单</b></font></div>
</div>
</body>
</html>
扫一扫
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
