Posted on 2007-11-16 15:53
semovy 閱讀(269)
評論(0) 編輯 收藏 所屬分類:
CSS式樣
<html>
<head>
<style type="text/css">
<!--
#headline{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:relative;
top:0px;
text-align:center;
cursor:move;
}
#layer{
width:100px;
height:100px;
background-color:#eee;
border:1px solid #fff;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
.content
{
width:100px;
height:100%;
position:relative;
font-size:20px;
color:green;
}
//-->
</style>
<script language="javascript">
<!--//
function drag(head,layer){
head.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(head.setCapture)
head.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
//o.style.left=tx;
//o.style.top=ty;
layer.style.left=tx;
layer.style.top=ty;
};
d.onmouseup=function(){
if(head.releaseCapture)
head.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
window.onload=function(){
drag(document.getElementById('headline'),document.getElementById('layer'));
};
//-->
</script>
</head>
<body>
<div id="layer" >
<div id='headline' algin="center">headling</div>
<div id="content">
<table class="content"><tbody><tr><td>absoluteabsoluteabsoluteabsoluteabsolute</td></tr></tbody></table>
</div>
</div>
</body>
</html>