百度空间 | 百度首页 
               
 
查看文章
  
圆角带阴影可拖动的的层
2008年08月21日 星期四 14:19
<!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>


类别：经典代码收藏-共享 | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者：
 
网友评论：
发表评论：
姓　名：
网址或邮箱： (选填)
内　容：
验证码： 请点击后输入四位验证码，字母不区分大小写
      

     

©2009 Baidu