<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> 发表于 @ 2007年10月19日 23:49:00|评论(loading...)|编辑