web transparent render

web 透明渲染，實現dom任意節點以任意透明度繪製到窗口上，以滿足實際開發中特殊效果的需要。

下載(25.1MB)： http://oltag.com:8080/yaolixing/18/11/00/OHUIv52.0.1_3_webTrans.rar

界面代碼：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://global/content/xul.css" type="text/css"?>
<?xml-stylesheet href="chrome://xulApp/skin/index.css" type="text/css"?>

 
<xul:window id="test-window" title="XUL APP" 
		xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
		xmlns:xbl="http://www.mozilla.org/xbl"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:html="http://www.w3.org/1999/xhtml"
		xmlns="http://www.w3.org/1999/xhtml"
		drawintitlebar='true'
		onload='onload()'
		>

  <script type="application/javascript" src="chrome://xulApp/content/js/common.js" />
  <script type="application/javascript" src="chrome://xulApp/content/js/global.js" />
  <script type="application/javascript" src="chrome://xulApp/content/js/index.js" />
 
 
 <xul:tooltip id="aHTMLTooltip" page="true"/>
 	<xul:hbox flex="1">
		<xul:vbox width="2" style="background-color: grey;overflow: hidden;">
			<xul:resizer dir="topleft"  style="cursor: nw-resize;"/>
			<xul:resizer dir="left" flex="1" style="cursor: w-resize;"/>
			<xul:resizer dir="bottomleft" style="cursor: sw-resize;"/>
		</xul:vbox>
		<xul:vbox  flex="1" >
			<xul:vbox height='2px' style="background-color: grey; overflow: hidden;"><xul:resizer  dir="top"  style="cursor: n-resize;"/></xul:vbox>
			<xul:vbox flex="1">
			   <xul:hbox  id='tbar'>
			        <xul:hbox class='toolbar' >
						<xul:label id="appicon" flex='1'/>
						<xul:label id='apptitle' >XUL APP</xul:label>
					</xul:hbox>

					<xul:hbox class='toolbar' flex="1"><spacer id="titlebar-spacer" flex="1"/></xul:hbox>

					<xul:hbox class='toolbar' >
						<xul:label id="minimize" flex='1' tooltiptext="最小化"/>
						<xul:deck class='toolbar-split'/>
						<xul:label id="maximize" tooltiptext="最大化"  />
						<xul:deck class='toolbar-split'/>
						<xul:label id="close" tooltiptext="關閉"  title="關閉" />
					</xul:hbox>
				</xul:hbox>
  
				<xul:hbox flex="1" style='background-color:transparent!important;'> 
 
<xul:hbox flex="1" style="vertical-align:middle;color:#303030;font:normal 22px 方正靜蕾簡體,華文行楷,楷體_GB2312,arial, tahoma, helvetica, sans-serif;font-weight:100;border:0px solid red;">
<div style=' display:table-cell;align:center;padding:20px 10px 20px 10px;'>
<marquee direction='up' scrolldelay='500' style='height:600px;overflow: hidden;border:0px solid green;'>
<br />
那一夜，我聽了一宿梵唱，不爲參悟，只爲尋你的一絲氣息。<br />
那一月，我轉過所有經輪，不爲超度，只爲觸摸你的指紋。<br />
那一年，我磕長頭擁抱塵埃，不爲朝佛，只爲貼着了你的溫暖。<br />
那一世，我翻遍十萬大山，不爲修來世，只爲路中能與你相遇。<br />
那一瞬，我飛昇成仙，不爲長生，只爲佑你平安喜樂。<br />
那一天，那一月，那一年，那一世<br />
<br /><br />

那一天<br />
閉目在經殿的香霧中<br />
驀然聽見<br /> 
你誦經的真言<br />
<br /><br />

那一月<br />
我轉動所有的經筒<br />
不爲超度<br />
只爲觸摸你的指尖<br />
<br /><br />

那一年<br />
我磕長頭匍匐在山路<br />
不爲覲見<br />
只爲貼着你的溫暖<br />
<br /><br />

那一世<br />
我轉山轉水轉佛塔呀<br />
不爲修來世<br />
只爲在途中與你相見<br />
<br /><br />

天空中潔白的仙鶴<br />
請將你的雙翅借我<br />
我不往遠處去飛<br />
只到理塘就回<br />
<br /><br />
</marquee>
</div>
</xul:hbox>

				</xul:hbox>

				<xul:hbox>
				<xul:deck flex="1">
				<xul:statusbar flex="1" id="statusbar"><xul:statusbarpanel flex="1">Ready</xul:statusbarpanel></xul:statusbar>
				</xul:deck>
				</xul:hbox>			
			
			
    </xul:vbox>
			<xul:vbox height='2px' style="background-color: grey; overflow: hidden;"><xul:resizer  dir="bottom" style="cursor: s-resize;"/></xul:vbox>
		</xul:vbox>
		<xul:vbox width="2" style="background-color: grey; overflow: hidden;">
			<xul:resizer dir="topright" height="1" style="cursor: ne-resize;"/>
			<xul:resizer dir="right" flex="1" style="cursor: e-resize;"/>
			<xul:resizer dir="bottomright" height="1" style="cursor: se-resize;"/>
		</xul:vbox>
	</xul:hbox>
 

<script>
 
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
var oBtn;

function onload()
{
  netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
  var aWidth=800;
  var aHeight=600;
  var xOffset = screen.availWidth/2 - aWidth/2;
  var yOffset = screen.availHeight/2 - aHeight/2;

  xOffset = xOffset > 0 ? xOffset : 0;
  yOffset = yOffset > 0 ? yOffset : 0;
  //align to screen
  window.moveTo(xOffset, yOffset);
  window.resizeTo(aWidth, aHeight);


  var oBtn; 
  oBtn = Comm.$('minimize');
  Comm.addEvent(oBtn, 'mouseup', function(){
  window.minimize();
  });

  oBtn = Comm.$('close');
  Comm.addEvent(oBtn, 'mouseup', function(){
  window.close();
  });
 
	 var otbar = Comm.$('tbar');

	  oBtn = Comm.$('maximize');
	  (function(){
	  var isFullScreen=false;
	  var oldX=0,oldY=0,oldWidth=0,oldHeight=0;
	  function windowToScreen()
	  {
		  if(isFullScreen)
		  {
			  isFullScreen=false;
			  window.moveTo(oldX, oldY);
			  window.resizeTo(oldWidth, oldHeight);
		  }else
		  {
			  isFullScreen=true;
			  oldX=window.screenX;
			  oldY=window.screenY;
			  oldWidth=window.outerWidth
			  oldHeight=window.outerHeight;

			  window.moveTo(0,0);
			  window.resizeTo(window.screen.availWidth, window.screen.availHeight);
			  //window.maximize();
		  }
	  }

	  Comm.addEvent(oBtn, 'mouseup', function(e){
	  windowToScreen();
	  });
	   Comm.addEvent(otbar, 'dblclick', function(){
	   windowToScreen();
	  });
	})();

	Comm.DragDropTitle(otbar);

}//onload()

 
</script> 
 
<xul:keyset>
<xul:key id="key1" modifiers="control" key="Q" oncommand="alert('你按了快捷鍵crtl+Q')"/>
<xul:key id="key2" modifiers="control alt" key="C" oncommand="alert('你按了快捷鍵crtl+alt+C')"/>
<xul:key id="key3" keycode="VK_F5" oncommand="location.reload();" />
</xul:keyset>
 
</xul:window>

200行不到的代碼，其中詩歌就佔了４０多行，試問當今何種框架可以與之比肩？如果可以實現如上效果，不論你用的是何種技術，使用何種框架 python,qt,c#,java,gtk,fltk,cef,directUI...只要200行代碼能實現如此效果，就貼出代碼比劃比劃。XUL封裝了近100多種常用控件，每個控件都支持css,html,js的修改,這裏展示的只是冰山之一角。