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 朱巖 閱讀(453) 評論(0)  編輯  收藏  所屬分類: JavaScript文章 
		
          
	
          
	
	


	


          
	    
    




          








          

				

          



    







          
        
	




主站蜘蛛池模板：
青神县|
石狮市|
治多县|
鄂伦春自治旗|
北海市|
望奎县|
鲜城|
三门县|
衡山县|
兴仁县|
剑川县|
名山县|
武冈市|
昌邑市|
乌拉特后旗|
建湖县|
娱乐|
丹棱县|
沛县|
吴堡县|
安阳市|
鄂尔多斯市|
肃宁县|
蓬溪县|
开化县|
绵竹市|
莆田市|
天柱县|
慈溪市|
桃江县|
曲麻莱县|
抚顺市|
旺苍县|
湟源县|
金山区|
林甸县|
苏尼特左旗|
北安市|
桐乡市|
呼和浩特市|
西乌珠穆沁旗|