Posted on 2008-03-29 15:26
semovy 阅读(2029)
评论(0) 编辑 收藏 所属分类:
JavaScript 、
CSS式样
<!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>