本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法。分享给大家供大家参考。具体分析如下：
这是一款基于javascript+CSS实现层拖动的代码，不同的是它在拖动的时候窗口会变色，使操作体验更好一些，你可以运行代码查看效果。它还可以显示/隐藏或关闭打开的效果，没事的时候推敲一下
<html><head><title>拖动窗口</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type='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><script language=JScript><!--var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover='orange',normal='#336699';//color;var index=10000;//z-index;//开始拖动;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;win.style.top = y1 + event.clientY - y0;sha.style.left = parseInt(win.style.left) + offx;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 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();}//初始化;function bulid(){var str = ""+ "<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:8pt;"+ "font-family:Tahoma;"+ "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*12-4) + ";padding-left:3px;'>" + this.title + "</span>"+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(/""+this.id+"/",null)'>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=xMsg" + this.id + "bg 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);"+ "'></div>";document.body.insertAdjacentHTML("beforeEnd",str);}//显示隐藏窗口function ShowHide(id,dis){var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):disdocument.getElementById("xMsg"+id).style.display = bdisplay;document.getElementById("xMsg"+id+"bg").style.display = bdisplay;}//--></script><script language='JScript'><!--function initialize(){var a = new xWin("1",160,200,200,200,"窗口1","xWin Demo");var b = new xWin("2",240,200,100,100,"窗口2","Welcome"); var c = new xWin("3",200,160,250,50,"窗口3","Copyright");ShowHide("1","none");//隐藏窗口1}window.onload = initialize;//--></script></head><base target="_blank"><body onselectstart='return false' oncontextmenu='return false' ><a onclick="ShowHide('1',null);return false;" href="">Windows 1</a><a onclick="ShowHide('2',null);return false;" href="">Windows 2</a><a onclick="ShowHide('3',null);return false;" href="">Windows 3</a></body></html>希望本文所述对大家的javascript程序设计有所帮助。
新闻热点
疑难解答
