JAVA流通桥

JAVA启发者

统计

留言簿(3)

AJAX相关网址

Eclipse相关网址

Hibernate

java相关网址

LINUX相关网址

webwork相关网址

友好链接

阅读排行榜

评论排行榜

用层模拟的小窗口(可拖动展合)

  1<html>
  2<head>
  3<title>网页特效---用层模拟的小窗口(可拖动展合)</title>
  4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5
  6<style type='text/<a href="http://www.iwangye.com/c23.aspx" title="">css</a>'>
  7<!--
  8body{font-size:12px;}
  9a:visited{text-decoration:none;color:slategray;}
 10a:hover{text-decoration:underline;color:slategray;}
 11a:link{text-decoration:none;color:slategray;}
 12-->
 13</style>
 14<script language=JScript>
 15<!--
 16//可以打包为js文件;
 17var x0=0,y0=0,x1=0,y1=0;
 18var offx=6,offy=6;
 19var moveable=false;
 20var hover='orange',normal='#336699';//color;
 21var index=10000;//z-index;
 22//开始拖动;
 23function startDrag(obj)
 24{
 25    if(event.button==1)
 26    {
 27        //锁定标题栏;
 28        obj.setCapture();
 29        //定义对象;
 30        var win = obj.parentNode;
 31        var sha = win.nextSibling;
 32        //记录鼠标和层位置;
 33        x0 = event.clientX;
 34        y0 = event.clientY;
 35        x1 = parseInt(win.style.left);
 36        y1 = parseInt(win.style.top);
 37        //记录颜色;
 38        normal = obj.style.backgroundColor;
 39        //改变风格;
 40        obj.style.backgroundColor = hover;
 41        win.style.borderColor = hover;
 42        obj.nextSibling.style.color = hover;
 43        sha.style.left = x1 + offx;
 44        sha.style.top  = y1 + offy;
 45        moveable = true;
 46    }
 47}
 48//拖动;
 49function drag(obj)
 50{
 51    if(moveable)
 52    {
 53        var win = obj.parentNode;
 54        var sha = win.nextSibling;
 55        win.style.left = x1 + event.clientX - x0;
 56        win.style.top  = y1 + event.clientY - y0;
 57        sha.style.left = parseInt(win.style.left) + offx;
 58        sha.style.top  = parseInt(win.style.top) + offy;
 59    }
 60}
 61//停止拖动;
 62function stopDrag(obj)
 63{
 64    if(moveable)
 65    {
 66        var win = obj.parentNode;
 67        var sha = win.nextSibling;
 68        var msg = obj.nextSibling;
 69        win.style.borderColor     = normal;
 70        obj.style.backgroundColor = normal;
 71        msg.style.color           = normal;
 72        sha.style.left = obj.parentNode.style.left;
 73        sha.style.top  = obj.parentNode.style.top;
 74        obj.releaseCapture();
 75        moveable = false;
 76    }
 77}
 78//获得焦点;
 79function getFocus(obj)
 80{
 81    if(obj.style.zIndex!=index)
 82    {
 83        index = index + 2;
 84        var idx = index;
 85        obj.style.zIndex=idx;
 86        obj.nextSibling.style.zIndex=idx-1;
 87    }
 88}
 89//最小化;
 90function min(obj)
 91{
 92    var win = obj.parentNode.parentNode;
 93    var sha = win.nextSibling;
 94    var tit = obj.parentNode;
 95    var msg = tit.nextSibling;
 96    var flg = msg.style.display=="none";
 97    if(flg)
 98    {
 99        win.style.height  = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
100        sha.style.height  = win.style.height;
101        msg.style.display = "block";
102        obj.innerHTML = "0";
103    }
104    else
105    {
106        win.style.height  = parseInt(tit.style.height) + 2*2;
107        sha.style.height  = win.style.height;
108        obj.innerHTML = "2";
109        msg.style.display = "none";
110    }
111}
112//创建一个对象;
113function xWin(id,w,h,l,t,tit,msg)
114{
115    index = index+2;
116    this.id      = id;
117    this.width   = w;
118    this.height  = h;
119    this.left    = l;
120    this.top     = t;
121    this.zIndex  = index;
122    this.title   = tit;
123    this.message = msg;
124    this.obj     = null;
125    this.bulid   = bulid;
126    this.bulid();
127}
128//初始化;
129function bulid()
130{
131    var str = ""
132        + "<div id=xMsg" + this.id + " "
133        + "style='"
134        + "z-index:" + this.zIndex + ";"
135        + "width:" + this.width + ";"
136        + "height:" + this.height + ";"
137        + "left:" + this.left + ";"
138        + "top:" + this.top + ";"
139        + "background-color:" + normal + ";"
140        + "color:" + normal + ";"
141        + "font-size:8pt;"
142        + "font-family:Tahoma;"
143        + "position:absolute;"
144        + "cursor:default;"
145        + "border:2px solid " + normal + ";"
146        + "' "
147        + "onmousedown='getFocus(this)'>"
148            + "<div "
149            + "style='"
150            + "background-color:" + normal + ";"
151            + "width:" + (this.width-2*2) + ";"
152            + "height:20;"
153            + "color:white;"
154            + "' "
155            + "onmousedown='startDrag(this)' "
156            + "onmouseup='stopDrag(this)' "
157            + "onmousemove='drag(this)' "
158            + "ondblclick='min(this.childNodes[1])'"
159            + ">"
160                + "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
161                + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
162                + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
163            + "</div>"
164                + "<div style='"
165                + "width:100%;"
166                + "height:" + (this.height-20-4) + ";"
167                + "background-color:white;"
168                + "line-height:14px;"
169                + "word-break:break-all;"
170                + "padding:3px;"
171                + "'>" + this.message + "</div>"
172        + "</div>"
173        + "<div id=xMsg" + this.id + "bg style='"
174        + "width:" + this.width + ";"
175        + "height:" + this.height + ";"
176        + "top:" + this.top + ";"
177        + "left:" + this.left + ";"
178        + "z-index:" + (this.zIndex-1) + ";"
179        + "position:absolute;"
180        + "background-color:black;"
181        + "filter:alpha(opacity=40);"
182        + "'></div>";
183    document.body.insertAdjacentHTML("beforeEnd",str);
184}
185//显示隐藏窗口
186function ShowHide(id,dis){
187    var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
188    document.getElementById("xMsg"+id).style.display = bdisplay;
189    document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
190}
191//modify by haiwa @ 2005-7-14 
192//
193//-->
194</script>
195
196<script language='JScript'>
197<!--
198function initialize()
199{
200    var a = new xWin("1",160,200,200,200,"窗口1","xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2002-8-13");
201    var b = new xWin("2",240,200,100,100,"窗口2","Welcome to visited my personal website:<br><a href=http://linkweb.cn/js target=_blank>http://linkweb.cn/js</a><br>and u can also sign my guestbook at:<br><a href=http://linkweb.cn/Js/GBook/Index.php target=_blank>http://linkweb.cn/Js/GBook/Index.php</a><br><br>");
202    var c = new xWin("3",200,160,250,50,"窗口3","Copyright by <a href='mailto:mailluwei@163.com'>LinkWeb.cN</a>!");
203    ShowHide("1","none");//隐藏窗口1
204}
205window.onload = initialize;
206//-->
207</script>
208</head>
209<base target="_blank">
210<body onselectstart='return false' oncontextmenu='return false' >
211<a onclick="ShowHide('1',null);return false;" href="">窗口1</a>
212<a onclick="ShowHide('2',null);return false;" href="">窗口2</a>
213<a onclick="ShowHide('3',null);return false;" href="">窗口3</a>
214</body>
215</html>
216
217

posted on 2007-05-23 11:55 朱岩 阅读(412) 评论(0)  编辑  收藏 所属分类: JavaScript文章


只有注册用户登录后才能发表评论。
网站导航: