<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
无标题文档
</title>
<style type="text/css">
body{ margin: 0; padding:0;}
#drag{position: absolute;top:0; left:0; z-index: 9999;width: 400px;height: 300px;background: #CCC; border: 1px solid blue;font:normal lighter 15px/28px Verdana,sans-serif;}
#title{ background: #44cef6; height:28px;line-height: 28px; color: #fff; font-size: 15px; font-weight: bold; text-align: center; width: 100%; }
#layout{background: blue; display: none; filter: alpha(opacity=30); left: 0; opacity: 0.3; position: absolute;top: 0; z-index: 1; }
</style>
<script>
function getY(e) {
e = e || window.event; //标准化事件对象
return e.pageY ? e.pageY : (e.clientY + document.documentElement.scrollTop);
}
function getX(e) {
e = e || window.event;
return e.pageX ? e.pageX : (e.clientX + document.documentElement.scrollLeft);
} //获得鼠标的坐标值
function GapsX(elem) {
return !elem.offsetParent ? elem.offsetLeft : (elem.offsetLeft + GapsX(elem.offsetParent));
} //对象距窗口最左端的偏移量（包括由于滚动条隐藏的部分）
function GapsY(elem) {
return !elem.offsetParent ? elem.offsetTop : (elem.offsetTop + GapsY(elem.offsetParent));
} //对象距窗口最顶端的偏移量（包括由于滚动条隐藏的部分）
window.onload = function() {
var tit = document.getElementById('title');
var dragelem = document.getElementById('drag');
var layoutdiv = document.getElementById('layout');
tit.onmousedown = function(e) {
var x = getX(e) - GapsX(this);
var y = getY(e) - GapsY(this);
document.onmousemove = function(e) {
dragelem.style.left = getX(e) - x + 'px';
dragelem.style.top = getY(e) - y + 'px';
layoutdiv.style.display = 'block';
layoutdiv.style.width = document.body.offsetWidth + 'px';
if (document.body.offsetHeight < document.documentElement.clientHeight) {
layoutdiv.style.height = document.documentElement.clientHeight + 'px';
} else {
layoutdiv.style.height = document.body.offsetHeight + 'px';
}
}
}
document.onmouseup = function() {
document.onmousemove = null;
layoutdiv.style.display = '';
}
}
</script>
</head>
<body>
<div id="drag">
<div id="title">
title
</div>
<div id="content">
<p style="font-variant:small-caps">The font-variant value of the text is "small-caps". </p>
</div>
</div>
<div id="layout"></div>
</body>
</html>
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
