<
style
>
...
.fugai{...}{
position:absolute;
z-index:100;
left:0px;
top:0px;
filter:alpha(opacity=10);/**//*IE兼容*/
opacity:0.1;/**//*FF兼容*/
-moz-opacity:0.1;
background-color:red;
}
.choose{...}{
position:absolute;
z-index:101;
width:300px;
height:70px;
background-color:blue;
}
.move{...}{
width:300px;
height:20px;
cursor:hand;
background-color:green;
border:solid black;
}
</ style >
< body >
< a href ="javascript:void(null);" onclick ="show();" id ="address" > 选择地点 </ a >
< div id ="fugai" class ="fugai" style ="display:none;" >
</ div >
< div id ="ch" style ="display:none;left:50px;top:20px;" class ="choose" >
< div class ="move" onmousedown ="move(this.parentNode,event);" ; > 拖动我 </ div >< br >
< a href ="javascript:void(null);" onclick ="choose('北京');" > 北京 </ a >
< a href ="javascript:void(null);" onclick ="choose('南京');" > 南京 </ a >
</ div >
</ body >
< script > ...
function show()...{
document.getElementById("fugai").style.display="block";
document.getElementById("fugai").style.width=document.body.clientWidth;
document.getElementById("fugai").style.height=document.body.clientHeight;
document.getElementById("ch").style.display="";
document.getElementById("ch").style.left="50px";
document.getElementById("ch").style.top="20px";
}
function choose(value)...{
document.getElementById("fugai").style.display="none";
document.getElementById("ch").style.display="none";
document.getElementById("address").firstChild.data=value;
}
function move(element,event)...{
var x=parseInt(element.style.left);
var y=parseInt(element.style.top);
var maxLeft=parseInt(document.body.clientWidth)-parseInt(element.clientWidth);
var maxTop=parseInt(document.body.clientHeight)-parseInt(element.clientHeight);
var deltaX=event.clientX-x;
var deltaY=event.clientY-y;
//添加临时事件
if(document.addEventListener)...{//2级DOM
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}else if(document.attachEvent)...{//IE5+
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}else...{//IE4
var oldonmousemove=document.onmousemove;
var oldonmouseup=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}
//我们处理该事件,不让其他元素见到它
if(event.preventDefault)...{//2级DOM
event.preventDefault();
}else...{//IE
event.returnValue=false;
}
//鼠标移动事件
function moveHandler(e)...{
if(!e)...{//IE
e=window.event;
}
element.style.left=(e.clientX-deltaX)+"px";
element.style.top=(e.clientY-deltaY)+"px";
var left=parseInt(element.style.left);
var top=parseInt(element.style.top);
if(left<0)...{
element.style.left="0px";
}
if(left>maxLeft)...{
element.style.left=maxLeft+"px";
}
if(top<0)...{
element.style.top="0px";
}
if(top>maxTop)...{
element.style.top=maxTop+"px";
}
if(e.stopPropagation)...{//2级DOM
e.stopPropagation();
}else...{//IE
e.cancelBubble=true;
}
}
//鼠标按键弹起
function upHandler(e)...{
if(!e)...{
e=window.event;
}
if(document.removeEventListener)...{//2级DOM
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}else if(document.detachEvent)...{//IE5+
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}else...{//IE4
document.onmouseup=oldonmouseup;
document.onmousemove=oldonmousemove;
}
if(e.stopPropagation)...{//2级DOM
e.stopPropagation();
}else...{//IE
e.cancelBubble=true;
}
}
}
</ script >
.fugai{...}{
position:absolute;
z-index:100;
left:0px;
top:0px;
filter:alpha(opacity=10);/**//*IE兼容*/
opacity:0.1;/**//*FF兼容*/
-moz-opacity:0.1;
background-color:red;
}
.choose{...}{
position:absolute;
z-index:101;
width:300px;
height:70px;
background-color:blue;
}
.move{...}{
width:300px;
height:20px;
cursor:hand;
background-color:green;
border:solid black;
}
</ style >
< body >
< a href ="javascript:void(null);" onclick ="show();" id ="address" > 选择地点 </ a >
< div id ="fugai" class ="fugai" style ="display:none;" >
</ div >
< div id ="ch" style ="display:none;left:50px;top:20px;" class ="choose" >
< div class ="move" onmousedown ="move(this.parentNode,event);" ; > 拖动我 </ div >< br >
< a href ="javascript:void(null);" onclick ="choose('北京');" > 北京 </ a >
< a href ="javascript:void(null);" onclick ="choose('南京');" > 南京 </ a >
</ div >
</ body >
< script > ...
function show()...{
document.getElementById("fugai").style.display="block";
document.getElementById("fugai").style.width=document.body.clientWidth;
document.getElementById("fugai").style.height=document.body.clientHeight;
document.getElementById("ch").style.display="";
document.getElementById("ch").style.left="50px";
document.getElementById("ch").style.top="20px";
}
function choose(value)...{
document.getElementById("fugai").style.display="none";
document.getElementById("ch").style.display="none";
document.getElementById("address").firstChild.data=value;
}
function move(element,event)...{
var x=parseInt(element.style.left);
var y=parseInt(element.style.top);
var maxLeft=parseInt(document.body.clientWidth)-parseInt(element.clientWidth);
var maxTop=parseInt(document.body.clientHeight)-parseInt(element.clientHeight);
var deltaX=event.clientX-x;
var deltaY=event.clientY-y;
//添加临时事件
if(document.addEventListener)...{//2级DOM
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}else if(document.attachEvent)...{//IE5+
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}else...{//IE4
var oldonmousemove=document.onmousemove;
var oldonmouseup=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}
//我们处理该事件,不让其他元素见到它
if(event.preventDefault)...{//2级DOM
event.preventDefault();
}else...{//IE
event.returnValue=false;
}
//鼠标移动事件
function moveHandler(e)...{
if(!e)...{//IE
e=window.event;
}
element.style.left=(e.clientX-deltaX)+"px";
element.style.top=(e.clientY-deltaY)+"px";
var left=parseInt(element.style.left);
var top=parseInt(element.style.top);
if(left<0)...{
element.style.left="0px";
}
if(left>maxLeft)...{
element.style.left=maxLeft+"px";
}
if(top<0)...{
element.style.top="0px";
}
if(top>maxTop)...{
element.style.top=maxTop+"px";
}
if(e.stopPropagation)...{//2级DOM
e.stopPropagation();
}else...{//IE
e.cancelBubble=true;
}
}
//鼠标按键弹起
function upHandler(e)...{
if(!e)...{
e=window.event;
}
if(document.removeEventListener)...{//2级DOM
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}else if(document.detachEvent)...{//IE5+
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}else...{//IE4
document.onmouseup=oldonmouseup;
document.onmousemove=oldonmousemove;
}
if(e.stopPropagation)...{//2级DOM
e.stopPropagation();
}else...{//IE
e.cancelBubble=true;
}
}
}
</ script >