javascript实现可拖动变色并关闭层窗口实例
本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法。分享给大家供大家参考。具体分析如下：
这是一款基于javascript+CSS实现层拖动的代码，不同的是它在拖动的时候窗口会变色，使操作体验更好一些，你可以运行代码查看效果。它还可以显示/隐藏或关闭打开的效果，没事的时候推敲一下
<html>
<head>
<title>拖动窗口</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<styletype='text/css'>
<!--
body{font-size:12px;}
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<scriptlanguage=JScript>
<!--
varx0=0,y0=0,x1=0,y1=0;
varoffx=6,offy=6;
varmoveable=false;
varhover='orange',normal='#336699';//color;
varindex=10000;//z-index;
//开始拖动;
functionstartDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
varwin=obj.parentNode;
varsha=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;
}
}
//拖动;
functiondrag(obj)
{
if(moveable)
{
varwin=obj.parentNode;
varsha=win.nextSibling;
win.style.left=x1+event.clientX-x0;
win.style.top=y1+event.clientY-y0;
sha.style.left=parseInt(win.style.left)+offx;
sha.style.top=parseInt(win.style.top)+offy;
}
}
//停止拖动;
functionstopDrag(obj)
{
if(moveable)
{
varwin=obj.parentNode;
varsha=win.nextSibling;
varmsg=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;
}
}
//获得焦点;
functiongetFocus(obj)
{
if(obj.style.zIndex!=index)
{
index=index+2;
varidx=index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
functionmin(obj)
{
varwin=obj.parentNode.parentNode;
varsha=win.nextSibling;
vartit=obj.parentNode;
varmsg=tit.nextSibling;
varflg=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";
}
}
//创建一个对象;
functionxWin(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();
}
//初始化;
functionbulid()
{
varstr=""
+"<divid=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:8pt;"
+"font-family:Tahoma;"
+"position:absolute;"
+"cursor:default;"
+"border:2pxsolid"+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])'"
+">"
+"<spanstyle='width:"+(this.width-2*12-4)+";padding-left:3px;'>"+this.title+"</span>"
+"<spanstyle='width:12;border-width:0px;color:white;font-family:webdings;'onclick='min(this)'>0</span>"
+"<spanstyle='width:12;border-width:0px;color:white;font-family:webdings;'onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
+"</div>"
+"<divstyle='"
+"width:100%;"
+"height:"+(this.height-20-4)+";"
+"background-color:white;"
+"line-height:14px;"
+"word-break:break-all;"
+"padding:3px;"
+"'>"+this.message+"</div>"
+"</div>"
+"<divid=xMsg"+this.id+"bgstyle='"
+"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);"
+"'></div>";
document.body.insertAdjacentHTML("beforeEnd",str);
}
//显示隐藏窗口
functionShowHide(id,dis){
varbdisplay=(dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
document.getElementById("xMsg"+id).style.display=bdisplay;
document.getElementById("xMsg"+id+"bg").style.display=bdisplay;
}
//-->
</script>
<scriptlanguage='JScript'>
<!--
functioninitialize()
{
vara=newxWin("1",160,200,200,200,"窗口1","xWinDemo");
varb=newxWin("2",240,200,100,100,"窗口2","Welcome");
varc=newxWin("3",200,160,250,50,"窗口3","Copyright");
ShowHide("1","none");//隐藏窗口1
}
window.onload=initialize;
//-->
</script>
</head>
<basetarget="_blank">
<bodyonselectstart='returnfalse'oncontextmenu='returnfalse'>
<aonclick="ShowHide('1',null);returnfalse;"href="">Windows1</a>
<aonclick="ShowHide('2',null);returnfalse;"href="">Windows2</a>
<aonclick="ShowHide('3',null);returnfalse;"href="">Windows3</a>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。