web 透明渲染，實作dom任意節點以任意透明度繪制到視窗上，以滿足實際開發中特殊效果的需要。
下載(25.1MB)： http://oltag.com:8080/yaolixing/18/11/00/OHUIv52.0.1_3_webTrans.rar
界面代碼：
view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
<?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;'>
那一夜，我聽了一宿梵唱，不為參悟，只為尋你的一絲氣息。
那一月，我轉過所有經輪，不為超度，只為觸摸你的指紋。
那一年，我磕長頭擁抱塵埃，不為朝佛，只為貼著了你的溫暖。
那一世，我翻遍十萬大山，不為修來世，只為路中能與你相遇。
那一瞬，我飛升成仙，不為長生，只為佑你平安喜樂。
那一天，那一月，那一年，那一世
那一天
閉目在經殿的香霧中
驀然聽見
你誦經的真言
那一月
我轉動所有的經筒
不為超度
只為觸摸你的指尖
那一年
我磕長頭匍匐在山路
不為覲見
只為貼著你的溫暖
那一世
我轉山轉水轉佛塔呀
不為修來世
只為在途中與你相見
天空中潔白的仙鶴
請將你的雙翅借我
我不往遠處去飛
只到理塘就回
</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>
<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>
[web transparent render]
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
A lovely goldfish desktop pet (using alpha-PNG and GDI+) http://www.codeproject.com/Articles/29184/A-lovely-goldfish-desktop-pet-using-alpha-PNG-and轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/78380.html
標籤：HTML/XML
上一篇：web 透明渲染