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

带阴影,可拖动,圆角,div + css 层

Posted on 2008-03-29 15:26 semovy 阅读(2030) 评论(0)  编辑  收藏 所属分类: JavaScriptCSS式样



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://teckotooling.vicp.net/teckotooling/css/niftyCorners.css">
<script type="text/javascript" src="http://teckotooling.vicp.net/teckotooling/js/niftycube.js"></script>
<style type="text/css">
<!--
#box_header{
 height:30px;
 padding:8px auto 8px auto;
 font-size:17px;
 color:#fff;
 font-weight:bold;
 background-color:#bd7803;
 position:relative;
 top:0px;
 text-align:center;
 cursor:move;
}
#box{
 width:200px;
 font-size:15px;
 padding:0px 5px 5px 0px;
 background-color:#eaeaea;
 position:absolute;
 top:200px;
 left:200px;
       
 text-align:center;
 cursor:default;  
}
#content
{
 width:100%;
 padding:5px 0px 5px 0px;
 position:relative;
        font-size:20px;
        color:green;
 text-align:center;
 background-color:#FDE3C3;
}
#content li
{
 list-style-type:none;
 font-size:15px;
 margin:1px 0px 1px 0px;
}
//-->
</style>
<script language="javascript">
<!--//
function drag(header,box){
 header.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(header.setCapture)
   header.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;
   box.style.left=tx;
   box.style.top=ty;
  };

  d.onmouseup=function(){
   if(header.releaseCapture)
    header.releaseCapture();
   else if(window.captureEvents)
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
   d.onmousemove=null;
   d.onmouseup=null;
  };
 };
}
window.onload=function(){
 drag(document.getElementById('box_header'),document.getElementById('box'));
 Nifty("#box_header","top");
 Nifty("#content","bottom");
 Nifty("#box");
};
//-->
</script>
</head>
<body>

<div id="box" >
  <div id='box_header'>
  <li style="margin:5px 0px 5px 0px;list-style-type:none">
     咸菜
  </li>
 </div>
  <div id="content">
  <li>孤独中等待,</li>
  <li>等待中无耐。</li>
  <li>无耐中恋爱,</li>
  <li>恋爱中变态。</li>
  </div> 
</div>

</body>
</html>


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


网站导航: