Windows Vista 窗口 - JavaScript论坛

live41

等　级：贵宾
威　望：67
帖　子：12442
专家分：0
注　册：2004-7-22
结帖率：66.67%

楼主

问题点数：0 回复次数：4

Windows Vista 窗口

<!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" lang="gb2312">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Vista Theme</title>
</head>

var photourl = new Image();
photourl.src = "http://www.mybbs.org/david/1.png";
photourl = null;
photourl = new Image();
photourl.src = "http://www.mybbs.org/david/2.png";
photourl = null;

var obj_moing = false; //拖动状态标志

var obj_Ofx = 0;
var obj_Ofy = 0;

var obj_Vfx = 0;
var obj_Vfy = 0;

var obj_lastx = 0;
var obj_lasty = 0;

var alldivnum = 4; //div的个数

var allwidth = 0;
var allheight = 0;

var scopeleft = 0;
var scopetop = 0;

var curX = 0;
var curY = 0;

//当鼠标按下时触发
function mousedown(obj)
{
if(obj_moing)
return; //如果正在拖动,那么返回

document.getElementById(obj).style.zIndex = 100 + alldivnum; //浮到上层
document.getElementById(obj).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.mybbs.org/david/2.png')";

for(i=1; i<=alldivnum; i++)
{
if(obj!="photodiv"+i)
{
//图层减1使之下沉并变换图象令颜色变淡
document.getElementById("photodiv"+i).style.zIndex=parseInt(document.getElementById("photodiv"+i).style.zIndex)-1;
document.getElementById("photodiv"+i).style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.mybbs.org/david/1.png')";
}
}

obj_Ofx = event.clientX; //获取鼠标点击事件在网页中的X坐标
obj_Ofy = event.clientY; //获取鼠标点击事件在网页中的Y坐标

obj_Vfx = document.getElementById(obj).offsetLeft; //获取图片相对于浏览器的左位置
obj_Vfy = document.getElementById(obj).offsetTop; //获取图片相对于浏览器的顶位置

//alert("obj_Ofx " + obj_Ofx + ", obj_Ofy " + obj_Ofy + ", obj_Vfx " + obj_Vfx + ", obj_Vfy " + obj_Vfy);

document.getElementById(obj).setCapture(); //锁住图片,唔使搞到其它图都郁埋
obj_moing = true; //设置为正在拖动
}

//当鼠标移动时触发
function mousemove(obj)
{
if(!obj_moing)
return; //如果不是正在拖动,那么返回

curX = event.clientX; //获取鼠标移动事件在网页中的X坐标
curY = event.clientY; //获取鼠标移动事件在网页中的Y坐标

obj_lastx = obj_Vfx + curX - obj_Ofx; //取得移动后的左位置
obj_lasty = obj_Vfy + curY - obj_Ofy; //取得移动后的上位置

/*
if(obj_lastx>640) obj_lastx=640; //如果左位置大于800,那么等于800.....防止超出指定的范围
if(obj_lastx<0) obj_lastx=0;
if(obj_lasty>480) obj_lasty=480; //如果下位置大于600,那么等于600.....防止超出指定的范围
if(obj_lasty<0) obj_lasty=0;
*/

document.getElementById(obj).style.left = obj_lastx; //设定移动后的位置
document.getElementById(obj).style.top = obj_lasty; //设定移动后的位置
}

//当鼠标弹起时触发
function mouseup(obj)
{
if(!obj_moing)
return; //如果不是正在拖动,那么返回

document.getElementById(obj).releaseCapture(); //释放锁住的图片
obj_moing = false; //设置为不是正在拖动
}

//添加新窗口
function adddiv()
{
alldivnum = alldivnum + 1; //div的个数加1
document.getElementById("innerdiv").innerHTML=document.getElementById("innerdiv").innerHTML+"<div id=\"photodiv"+alldivnum+"\" class=\"pngholder\" onclick=\"statectl(this.id)\" onMouseDown=\"mousedown(this.id)\" onMouseMove=\"mousemove(this.id)\" onMouseUp=\"mouseup(this.id)\" style=\"z-index:"+(alldivnum+100)+";position: absolute; width:290px; height:358px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.mybbs.org/david/1.png');\"></div>";
}

//关闭(最大化|最小化未使用)
function statectl(obj)
{
//scroll是当前滚动条的位置,分别有left和top的位置
curX = event.clientX + document.documentElement.scrollLeft;
curY = event.clientY + document.documentElement.scrollTop;

//由于event.clientX|Y仅是相对于IE窗口边缘的位置,当拖动条下拉之后仍然只计算相对于边缘的距离
//alert(event.clientX + ", " + event.clientY);

allwidth = parseInt(document.getElementById(obj).offsetLeft) + parseInt(document.getElementById(obj).style.width);
allheight = parseInt(document.getElementById(obj).offsetTop) + parseInt(document.getElementById(obj).style.height);

//alert(document.getElementById(obj).offsetLeft + ", " + document.getElementById(obj).offsetTop); //控件距离边缘的位置
//alert(document.getElementById(obj).style.width + ", " + document.getElementById(obj).style.height); //控件的长宽

scopeleft = parseInt(allwidth) - parseInt(curX);
scopetop = parseInt(allheight) - parseInt(curY);
//alert(scopeleft + ", " + scopetop);

if(scopeleft>=15 && scopeleft<=50 && scopetop>=333 && scopetop<=348)
{ document.getElementById(obj).style.display="none"; }

if(scopeleft>=54 && scopeleft<=76 && scopetop>=333 && scopetop<=348)
{ alert("最大化"); }

if(scopeleft>=79 && scopeleft<=101 && scopetop>=333 && scopetop<=348)
{ alert("最小化"); }
}

//排列窗口位置
function setpos()
{
for(i=1; i<=alldivnum; i++)
{
document.getElementById("photodiv"+i).style.zIndex=100+i;
document.getElementById("photodiv"+i).style.top=25*i;
document.getElementById("photodiv"+i).style.left=25*i;
}
}
</script>

body{ background:url(http://www.mybbs.org/david/Royale.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:center; }
</style>

<body>