posts - 0, comments - 77, trackbacks - 0, articles - 356
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

拖动层.兼容(ie ff ns)

Posted on 2007-11-16 15:53 semovy 阅读(258) 评论(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>


只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问