教程集 > 脚本编程 > javascript > 正文 javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm())

javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm())

发布时间：2023-05-10 编辑：jiaochengji.com

教程集为您提供javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm()) 等资源，欢迎您收藏本站，我们将为您提供最新的javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm()) 资源

提示：您可以先修改部分代码再运行

javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm())   <!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>  <title>窗口类 </title>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  <script type="text/javascript">  /**************************************************   * EasyWindow.js   * 30.5.2008   **************************************************   * msn:danxinju@hotmail.com   * author:xj.d   **************************************************/  var EasyWindow = function(title/*标题*/ ,content/*显示内容*/ ,type/*类型*/ ,style/*窗口样式*/){  	this.title = title;	//标题  	this.name = parseInt(Math.random()*100000);	//窗口名称  	this.style = style;	//窗口样式  	this.content = content;	//显示内容  	this.type = typeof type == "undefined"?"common" : type;	//类型  	this.height = ""; //窗口高度  	this.width = ""	//窗口宽度    	this.init = function(){	//初始化窗口  		//存储窗口字符串  		var strInit = new EasyWindow.StringBuild();  		strInit.push("<div style="width:350px;height:400px;position:absolute;border:1px solid #cccccc;");  		strInit.push("font-family: 宋,sans-serif;font-size:12px;top:0px;left:0px;");  		strInit.push("border-bottom:2px solid #E0E0E0;border-right:2px solid #E0E0E0;" id=""  this.name  "">");  		strInit.push("<table style="width:100%;height:25px;cursor:move;background:url(images/green.gif);" ");  		strInit.push("cellpadding="0" cellspacing="0">");  		strInit.push("<tr>");  		strInit.push("<td style="font-weight:bold;border-bottom:1px solid #cccccc;padding-left:3px;">"  this.title  "</td>");  		strInit.push("<td style="width:38px;border-bottom:1px solid #cccccc;">");  		strInit.push("<img alt="javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm()) "  src="" style="border:0;" alt="隐藏" /> ");  		strInit.push("<img alt="javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm()) "  src="" style="border:0;" alt="关闭" />");  		strInit.push("</td></tr></table>");  		strInit.push("<div style="height:90%;padding:3px;overflow:auto;background:#ffffff;"></div></div>");  		//加载窗口  		var divInit = document.createElement("div");  		divInit.innerHTML = strInit.toString();  		document.body.appendChild(divInit);  		//设置部件命令  		this.setCss();	//设置窗口属性  		this.startDrag();	//设置拖动  		this.setContent();	//设置内容  		this.setTop();	//设置窗口优先级  		this.setCommond();	//设置关闭  		EasyWindow.ArrayW.push(document.getElementById(this.name));	//存储窗口到数组    	};this.init();  };    //存储窗口到数组  EasyWindow.ArrayW = new Array();    //字符串连接类  EasyWindow.StringBuild = function(){  	this.arr = new Array();  	this.push = function(str){  		this.arr.push(str);  	};  	this.toString = function(){  		return this.arr.join("");  	};  };    //拖动类  EasyWindow.Drag = function(o ,oRoot){  	var _self = this;  	//拖动对象  	this.obj = (typeof oRoot != "undefined") ?oRoot : o;  	this.relLeft = 0;	//记录横坐标  	this.relTop = 0;	//记录纵坐标  	o.onselectstart = function(){  		return false;  	};  	o.onmousedown = function(e){	//鼠标按下  		e = _self.fixE(e);  		_self.relLeft = e.clientX - _self.fixU(_self.obj.style.left);   		_self.relTop = e.clientY - _self.fixU(_self.obj.style.top);   		document.onmousemove = function(e){  			_self.drag(e);  			_self.obj.style.border = "1px dashed #000000";  			_self.obj.style.filter = "alpha(opacity=30)";  			_self.obj.style.opacity = "0.3";  		};  		document.onmouseup	 = function(){  			_self.end();  			_self.obj.style.border = "1px solid #cccccc";  			_self.obj.style.borderBottom = "2px solid #E0E0E0";  			_self.obj.style.borderRight = "2px solid #E0E0E0";  			_self.obj.style.filter = "alpha(opacity=100)";  			_self.obj.style.opacity = "1";  		};  	};  	this.drag = function(e){	//拖动  		e = this.fixE(e);  		var l = e.clientX - this.relLeft;  		var t = e.clientY - this.relTop;  		if (t < 0)  		{  			t = 0;	//防止头部消失  		}  		this.obj.style.left = l  "px";  		this.obj.style.top = t  "px";	  	};  	this.end = function(){	//结束拖动  		document.onmousemove = null;  		document.onmouseup = null;  	};  	this.fixE = function(e){	//修复事件  		if (typeof e == "undefined") e = window.event;  		return e;  	};  	this.fixU = function(u){	//处理px单位  		return parseInt(u.split("p")[0]);  	};  };    //设置窗口属性  EasyWindow.prototype.setCss = function(){  	//设定样式  	var obj = document.getElementById(this.name);  	if(typeof this.style != "undefined")  	{  		if(typeof this.style.width != "undefined") obj.style.width = this.style.width;	//设置宽度  		if(typeof this.style.height != "undefined")	obj.style.height = this.style.height; //设置高度  		if(typeof this.style.top != "undefined") obj.style.top = this.style.top; //设置top  		if(typeof this.style.left != "undefined") obj.style.left = this.style.left; //设置left  		if(typeof this.style.background != "undefined")	//设置背景  		{  			obj.getElementsByTagName("table")[0].style.background = "url("  this.style.background  ")";  		}  	}  	//存储宽高度  	this.height = obj.style.height;  	this.width = obj.style.width;  }    //窗口拖动  EasyWindow.prototype.startDrag = function(){  	var obj = document.getElementById(this.name);  	new EasyWindow.Drag(obj.childNodes[0] ,obj);  };    //设置内容  EasyWindow.prototype.setContent = function(){  	var obj = document.getElementById(this.name).childNodes[1];   	if(this.type == "common")  	{  		obj.innerHTML = this.content;  	}  	else   	{  		var iframe = document.createElement("iframe");  		iframe.width = "100%";  		iframe.height = "100%";  		iframe.frameBorder = 0;  		iframe.src = this.content;  		obj.appendChild(iframe);  	}  };    //设定窗口优先级  EasyWindow.prototype.setTop = function(){  	document.getElementById(this.name).onclick =   	document.getElementById(this.name).onmousedown =   	function(){  		for(var i=0;i<EasyWindow.ArrayW.length;i  )  		{  			EasyWindow.ArrayW[i].style.zIndex = 1;  		}  		this.style.zIndex = 100;  	};	  };    //设置关闭  EasyWindow.prototype.setCommond = function(){  	var _self = this;  	//根对象  	var obj = document.getElementById(this.name);  	//设置隐藏  	obj.childNodes[0].getElementsByTagName("a")[0].onclick = function(){  		if (obj.childNodes[1].style.display == "")  		{  			obj.style.height = "25px";  			obj.style.width = "350px";  			obj.childNodes[1].style.display = "none";  			this.getElementsByTagName("img")[0].src = "images/show.gif";  		}  		else  		{  			obj.style.height = _self.height;  			obj.style.width = _self.width;  			obj.childNodes[1].style.display = "";  			this.getElementsByTagName("img")[0].src = "images/hide.gif";  		}  	};  	//设置关闭  	obj.childNodes[0].getElementsByTagName("a")[1].onclick = function(){  		obj.style.display = "none";  		obj.removeNode(true);  	};  };    //获取值  EasyWindow.prototype.getValue = function(){  	return this.content;  };    //设置值  EasyWindow.prototype.setValue = function(Value){  	this.content = Vlaue;  	this.setContent();  };    //加载实例  window.onload = function(){  	 example1 = new EasyWindow("测试窗口2" ,"这里是自定义:<br /><input type='text' />输入文字" ,"common")  	 example2 = new EasyWindow("测试窗口1" ,"http://www.baidu.com" ,"url" ,{  						left:"300px" ,top:"100px" ,width:"750px" ,height:"600px" ,background:"images/gray.gif"  					});  	 example3 = new EasyWindow("测试窗口3" ,"http://www.google.cn" ,"url" ,{  						left:"400px" ,top:"200px" ,width:"750px" ,height:"600px" ,background:"images/green.gif"  					});  	   }    </script>  </head>  <body>    </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：

上一篇：javascript 防开心网好友印象特效代码下一篇：图片特效-腾讯客服图片幻灯切换效果

[关闭]

javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm())

最近更新

浏览排行