直接贴代码：
<html>
<head>
<title>_xWin</title>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='slategray';//color;
var index=10000;//z-index;
var xx;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
sha.style.left = parseInt(win.style.left) + offx;
if ((y1 + event.clientY - y0)>0 && (y1 + event.clientY - y0)<600){
win.style.top = y1 + event.clientY - y0;
sha.style.top = parseInt(win.style.top) + offy;
}
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display=="none";
if(flg)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
//关闭;
function cls(obj)
{
var win = obj.parentNode.parentNode.parentNode;
//var sha = win.nextSibling;
win.style.visibility = "hidden";
//sha.style.visibility = "hidden";
}
//显示/隐藏;
function ShowHide()
{
if (xx!=null)
if (xx.style.visibility == "hidden")
xx.style.visibility = "visible";
else if (xx.style.visibility == "visible")
xx.style.visibility = "hidden";
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
xx = document.getElementById('allx');
xx.style.visibility = "visible";
}
//初始化;
function bulid()
{
var str = ""
+ "<div id='allx'><div id='xMsg'" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:11px;"
+ "font-family:Verdana;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "' "
+ "onmousedown='getFocus(this)'>"
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "' "
+ "onmousedown='startDrag(this)' "
+ "onmouseup='stopDrag(this)' "
+ "onmousemove='drag(this)' "
+ "ondblclick='min(this.childNodes[1])'"
+ ">"
+ "<span style='width:" + (this.width-2*14-4) + ";padding-left:3px;'>" + this.title + "</span>"
+ "<span style='width:14;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
+ "<span style='width:14;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div id='xshadow' style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "'>by wildwind</div></div>";
document.getElementById('msgbox').innerHTML = str;
}
//-->
</script>
<script language='JScript'>
<!--
function initialize()
{
var a = new xWin("1",460,400,200,200,"是要这个效果吗？","<br>这里有几点需要注意的地方：<br><br>1、xx这个变量是你自己添加的吧？想法是对的，但是放错了地方，你只在cls()这个方法里面给xx赋值，这就造成了这个对象在窗口第一次出现时由于没有被赋值(关闭按钮还没有被点击)，导致无法获取，所以应该把对xx赋值这个工作放在窗口第一次初始化完成的地方，也就是xWin函数中，this.build语句之后。当然也可能你已经试过放在这里，但是发现根本不起作用，这就涉及到下一个要注意的问题了。<br><br>2、Build函数的最后，你是通过insertAdjacentHTML()方法把生成的代码放在了网页全部html标签之后，因此生成的代码中的对象在页面中使用getElementById()方法根本访问不到，所以才会不起作用，怎么改呢？方法很多，我是这样处理的，在页面body的关闭标签之前插入一个div，然后用innerHTML()方法写入。<br><br>3、对于代码，我进行了一点修正，因为发现你的cls()方法当中把xWin和他的阴影一并隐藏了，但是在ShowHide()方法中却只把xWin显示出来，这就导致关闭(实质上是hidden)后再打开的窗体已经没有了阴影，当然这也不算什么大问题，我在xWin和他的阴影外面套了一个allx的div，再把这个对象赋给xx，然后就可以一并隐藏一并显示了，更方便一些。<br><br>4、主要就是这几个地方，这个效果还是很不错的，不过程序结构还可以再优化一些，代码比较多，我也没有细看，稍微改了一下，可能不是最好的方法。大家继续提建议啊。希望对楼主能有帮助。");
}
window.onload = initialize;
//-->
</script>
</head>
<body onselectstart='return false' oncontextmenu='return false' scroll='no'>
<DIV class=textSheet
style="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #639517 1px solid; BORDER-LEFT: #3E8529 1px solid; BORDER-BOTTOM: #3E8529 1px solid">
<table width="242" height="160" border="1" ID="Table2">
<td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="ShowHide()">显示隐藏</td>
</table>
</DIV>
<div id="msgbox"></div>
</body>
</html>
相关推荐
1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏...
类似于桌面程序中的表格拖动表头的效果，当鼠标停留在表头边框线上时，鼠标会变成表示左右拖动的形状，接着拖动鼠标，会在表格中出现一条随鼠标移动的竖线，最后放开鼠标，表格列宽会被调整。最近比较空闲，便自己...
类似于桌面程序中的表格拖动表头的效果，当鼠标停留在表头边框线上时，鼠标会变成表示左右拖动的形状，接着拖动鼠标，会在表格中出现一条随鼠标移动的竖线，最后放开鼠标，表格列宽会被调整。最近比较空闲，便自己...
5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select...
5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select...
实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...
13.4.htm 改变<div>的内容 13.5.htm 改变页面样式 第14章（\cha14） 14.1.htm 节点插入与追加 14.2.htm 节点复制 14.3.htm 节点删除与替换 14.4.htm 修改...
0101 使用Div函数做整除操作 68 0102 使用DivMod函数返回两个操作数相除的商和余数 68 0103 使用Power函数返回底数的任何次幂 69 0104 使用Round函数将实数四舍五入为整数 69 0105 使用Sqr函数计算指定数的...
0101 使用Div函数做整除操作 68 0102 使用DivMod函数返回两个操作数相除的商和余数 68 0103 使用Power函数返回底数的任何次幂 69 0104 使用Round函数将实数四舍五入为整数 69 0105 使用Sqr函数计算指定数的...
查看1.2.htm中noscript显示效果的方法如下： 1．将该实例复制到C:\Inetpub\wwwroot下； 2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动脚本”中选用“禁用”单选框 3．在浏览器中...
查看1.2.htm中noscript显示效果的方法如下： 1．将该实例复制到C:\Inetpub\wwwroot下； 2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动脚本”中选用“禁用”单选框 3．在浏览器中...