<button id="qssi4"></button>

中畫網(wǎng)

標(biāo)題: vml中g(shù)roup的用途 [打印本頁(yè)]

作者: 沐月乘風(fēng) 時(shí)間: 2008-4-24 18:06
標(biāo)題: vml中g(shù)roup的用途
下面是沐緣華老師的講解,,,,,,

該標(biāo)記不是用來(lái)輸出某種圖形的、運(yùn)行時(shí)其本身也不可見(jiàn)，而且也沒(méi)有專用屬性，只有VML通用屬性，但卻也是非常重要的、特殊的VML標(biāo)記。它的作用就是充當(dāng)“類似父或母”的身份將多個(gè)“類似兒女成員”的圖形囊括其中，然后你可以單獨(dú)性的描述“父母”，不必一個(gè)一個(gè)去控制“單個(gè)子女”，從而實(shí)現(xiàn)“全員子女”繼承“父母”遺傳的id, class, style (top, left, width, height, rotation, z-index, position, visibility, display), title, href, target, alt, coordsize, coordorigin等等屬性。而我們以后實(shí)際應(yīng)用，最重要的是讓“子女”繼承CSS-style()括號(hào)里的屬性

根據(jù)沐老師所講,我做個(gè)例子讓大家更深體會(huì),主要是vml+time特效的例子,讓大家更好的領(lǐng)悟

pacity2 = ".5" focus = "0%" focusposition = "1,1" focussize = "0,0">

pacity2 = ".5" focus = "0%" focusposition = "1,1" focussize = "0,0">pacity2 = ".5" focus = "0%" focusposition = "1,1" focussize = "0,0">

[ 本帖最后由沐月乘風(fēng) 于 2008-4-24 20:13 編輯 ]

作者: 沐月乘風(fēng) 時(shí)間: 2008-4-24 19:55
代碼<DIV style=\"position:relative; top: 0px; left: 0px; width:660px; height:620px; overflow: hidden\"><STYLE>v\\:*{behavior:url(#default#VML);}</STYLE>
<?xml:namespace prefix = v /><v:group style=\"Z-INDEX: 20; LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: 0px; HEIGHT: 50px; rotation: 0\" coordsize = \"100,100\"><v:curve from = \"250,265\" control1 = \"273,389\" control2 = \"280,467\" to = \"266,637\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"3pt\"><v:fill></v:fill><v:stroke opacity = \"52428f\"></v:stroke></v:curve><v:curve from = \"270,414\" control1 = \"264,371\" control2 = \"265,334\" to = \"189,316\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"2pt\"><v:stroke opacity = \"52428f\"></v:stroke></v:curve><v:curve from = \"260,364\" control1 = \"256,353\" control2 = \"258,342\" to = \"261,336\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"2pt\"><v:stroke opacity = \"52428f\"></v:stroke></v:curve><v:curve from = \"253,350\" control1 = \"236,343\" control2 = \"223,340\" to = \"220,345\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"2pt\"><v:stroke opacity = \"52428f\"></v:stroke></v:curve>
<DIV id=kirara style=\"VISIBILITY: hidden\"><v:group style=\"LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 100px; rotation: 0\" coordsize = \"100,100\"><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"#6b7f4c\" strokecolor = \"#6b7f4c\" path = \" m-31,47 c24,66,56,8,54,-51,5,-49,-59,-16,-31,47 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#00a600\" o

pacity2 = \".5\" focus = \"0%\" focusposition = \"1,1\" focussize = \"0,0\"></v:fill></v:shape><v:curve from = \"-31,47\" control1 = \"-21,18\" control2 = \"42,-40\" to = \"42,-40\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"1pt\"></v:curve><v:curve from = \"-13,14\" control1 = \"-18,6\" control2 = \"-16,-10\" to = \"-11,-20\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"1pt\"></v:curve><v:curve from = \"-20,28\" control1 = \"1,23\" control2 = \"14,21\" to = \"27,7\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"1pt\"></v:curve></v:group></v:group><v:group id=vmlgroup3 style=\"LEFT: 160px; WIDTH: 100px; POSITION: absolute; TOP: 374px; HEIGHT: 100px; rotation: 80; flip: x\" coordsize = \"100,100\"><v:group style=\"LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 100px; rotation: 0\" coordsize = \"100,100\"><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"#6b7f4c\" strokecolor = \"#6b7f4c\" path = \" m-31,47 c24,66,56,8,54,-51,5,-49,-59,-16,-31,47 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#00a600\" o:opacity2 = \".5\" focus = \"0%\" focusposition = \"1,1\" focussize = \"0,0\"></v:fill></v:shape><v:curve from = \"-31,47\" control1 = \"-21,18\" control2 = \"42,-40\" to = \"42,-40\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"1pt\"></v:curve><v:curve from = \"-13,14\" control1 = \"-18,6\" control2 = \"-16,-10\" to = \"-11,-20\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"1pt\"></v:curve><v:curve from = \"-20,28\" control1 = \"1,23\" control2 = \"14,21\" to = \"27,7\" filled = \"f\" strokecolor = \"#6b7f4c\" strokeweight = \"1pt\"></v:curve></v:group></v:group><v:group style=\"Z-INDEX: 10; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 100px; rotation: 0\" coordsize = \"100,100\"><v:oval style=\"LEFT: 157px; WIDTH: 154px; POSITION: absolute; TOP: 116px; HEIGHT: 138px; rotation: 0\" coordsize = \"21600,21600\" fillcolor = \"red\" strokecolor = \"red\" strokeweight = \"1pt\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,0\" focussize = \"0,0\"></v:fill></v:oval><v:shape id=hanabira2 style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"#d02c69\" strokecolor = \"red\" path = \" m253,120 c278,94,297,97,308,142,328,196,339,163,303,199 l253,120 x e\"><v:fill pacity=\"0.9\" type = \"gradientRadial\" color2 = \"red\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"0,0\" focussize = \"1,0\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m244,283 c296,350,284,266,316,268,339,270,343,244,293,212 l244,283 x e\"><v:fill pacity=\"0.9\" type = \"gradientRadial\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m152,211 l127,261 c152,275,145,313,161,304,172,299,141,324,240,302,254,296,262,271,281,253 l152,211 x e\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,0\" focussize = \"0,0\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m306,150 c364,150,335,135,353,191,302,270,344,228,276,209 l306,150 x e\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m227,101 c140,114,207,81,118,143,135,180,102,223,127,237,149,255,191,272,223,234 l227,101 x e\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:shape><v:curve style=\"LEFT: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 160px\" from = \"177,125\" control1 = \"204,75\" control2 = \"183,80\" to = \"283,125\" fillcolor = \"red\" strokecolor = \"red\" strokeweight = \"1pt\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#f61156\" o:opacity2 = \"58982f\" focus = \"0%\"></v:fill></v:curve><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m211,232 c205,264,189,267,257,276,297,229,314,230,269,197 l211,232 x e\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"0,0\" focussize = \".5,.5\"></v:fill></v:shape><v:curve style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px\" from = \"284,162\" control1 = \"330,205\" control2 = \"308,212\" to = \"262,205\" fillcolor = \"red\" strokecolor = \"red\" strokeweight = \"1pt\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:curve><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m218,137 c183,81,147,152,156,168,157,224,249,202,246,187,157,202,179,133,218,137 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill><v:extrusion on = \"t\" skewangle = \"135\" backdepth = \"30pt\" color = \"#d02c69\" lightposition = \"-50000,90000\" lightposition2 = \"90000\"></v:extrusion></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m210,165 c253,137,272,171,264,201,290,185,311,169,289,128,288,102,180,64,210,165 xe\"><v:fill pacity=\"0.9\" type = \"gradientRadial\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"0,1\" focussize = \"0,0\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m209,150 c272,139,241,163,252,165,251,168,284,172,239,215 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill><v:shadow on = \"t\" color = \"#d02c69\" offset = \"0,5.25pt\"></v:shadow></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m166,216 c212,218,251,223,281,193,277,211,284,227,265,240,247,244,174,255,166,216 xe\"><v:fill pacity=\"0.9\" type = \"gradientRadial\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\"></v:fill><v:shadow on = \"t\" color = \"#d02c69\" offset = \"0,5.25pt\"></v:shadow></v:shape><v:oval style=\"LEFT: 197px; WIDTH: 28px; POSITION: absolute; TOP: 150px; HEIGHT: 29px; rotation: 0\" coordsize = \"21600,21600\" fillcolor = \"red\" strokecolor = \"red\" strokeweight = \"1pt\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill><v:extrusion on = \"t\" skewangle = \"100\" backdepth = \"30pt\" color = \"#d02c69\" lightposition = \"-50000,90000\" lightposition2 = \"90000\"></v:extrusion></v:oval><v:oval style=\"LEFT: 202px; WIDTH: 20px; POSITION: absolute; TOP: 157px; HEIGHT: 21px; rotation: 0\" coordsize = \"21600,21600\" fillcolor = \"red\" strokecolor = \"#d02c69\" strokeweight = \"1pt\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:oval><v:oval style=\"LEFT: 208px; WIDTH: 12px; POSITION: absolute; TOP: 165px; HEIGHT: 13px; rotation: 0\" coordsize = \"21600,21600\" fillcolor = \"#d02c69\" strokecolor = \"red\" strokeweight = \"1pt\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"red\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:oval><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m197,163 c201,173,205,178,218,182,204,195,185,190,197,163 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m197,169 c196,167,198,152,214,153,201,146,188,153,197,169 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m187,189 c204,195,229,192,238,180,234,207,203,209,187,189 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill><v:shadow on = \"t\" color = \"#d02c69\" offset = \"0,5.25pt\"></v:shadow></v:shape></v:group></v:group><v:fill Opacity=\"0.9\" Color=\"red\" type=\"gradientRadial\" focussize=\"0.5,0.5\" focusposition=\"1,1\" focus=\"0\" o:opacity2=\"0.9\" Color2=\"#d02c69\"></v:fill><v:extrusion on=\"true\" lightposition2=\"90000\" lightposition=\"-50000,90000\" color=\"#d02c69\" skewangle=\"100\" backdepth=\"30\"></v:extrusion><v:oval style=\"LEFT: 202px; WIDTH: 20px; POSITION: absolute; TOP: 157px; HEIGHT: 21px; rotation: 0\" coordsize = \"21600,21600\" fillcolor = \"red\" strokecolor = \"#d02c69\" strokeweight = \"1pt\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:oval><v:oval style=\"LEFT: 208px; WIDTH: 12px; POSITION: absolute; TOP: 165px; HEIGHT: 13px; rotation: 0\" coordsize = \"21600,21600\" fillcolor = \"#d02c69\" strokecolor = \"red\" strokeweight = \"1pt\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"red\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:oval><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m197,163 c201,173,205,178,218,182,204,195,185,190,197,163 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m197,169 c196,167,198,152,214,153,201,146,188,153,197,169 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill></v:shape><v:shape style=\"LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 160px; rotation: 0\" coordsize = \"160,160\" fillcolor = \"red\" strokecolor = \"red\" path = \" m187,189 c204,195,229,192,238,180,234,207,203,209,187,189 xe\"><v:fill type = \"gradientRadial\" opacity = \"58982f\" color2 = \"#d02c69\" o:opacity2 = \"58982f\" focus = \"0%\" focusposition = \"1,1\" focussize = \".5,.5\"></v:fill><v:shadow on = \"t\" color = \"#d02c69\" offset = \"0,5.25pt\"></v:shadow></v:shape>
</div>
<STYLE>.time {
BEHAVIOR: url(#default#time2)
filter: /*ALE*/ }
</STYLE>
<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /><t:animateMotion targetElement=\"vmlgroup2\" path=\"m 0 0 c 0 0 62 31 61 33 c -21 45 -108 47 -104 60 c 15 47 122 10 141 60 c 2 5 -51 23 -100 49 c -43 22 -82 52 -85 47 c 50 70 84 59 178 83 c 98 25 206 15 206 15\" begin=\"0\" dur=\"3\" accelerate=\"1\" autoreverse=\"false\" repeatcount=\"indefinite\" fill=\"hold\"/> [ 本帖最后由沐月乘風(fēng) 于 2008-4-24 20:06 編輯 ]

作者: 祝福 時(shí)間: 2008-4-24 21:26

歡迎沐月乘風(fēng)老師~學(xué)習(xí)了！

作者: 沐月乘風(fēng) 時(shí)間: 2008-4-24 21:35
向祝福老師學(xué)習(xí)啊

val id=vml91 style=\"Z-INDEX: 3579; LEFT: 598px; WIDTH: 9px; TOP: 351px; HEIGHT: 6px\" coordsize = \"21600,21600\" filled = \"t\" fillcolor = \"#edfc66\" strokecolor = \"#1c9b18\" strokeweight = \".75pt\">val>

val id=vml10 style=\"Z-INDEX: 3070; LEFT: 384px; WIDTH: 3px; TOP: 303px; HEIGHT: 6px\" coordsize = \"21600,21600\" fillcolor = \"white\" strokecolor = \"#eed41c\" strokeweight = \".75pt\">

[ 本帖最后由沐月乘風(fēng) 于 2009-5-12 00:47 編輯 ]

作者: 小白兔 時(shí)間: 2008-4-24 22:55
進(jìn)來(lái)學(xué)習(xí)，謝謝沐老師

作者: 雄杰獨(dú)倚 時(shí)間: 2008-5-13 21:25
看的暈暈的~算是學(xué)習(xí)了

作者: 快樂(lè)相隨 時(shí)間: 2008-5-31 21:33
才看到乘風(fēng)老師在這里發(fā)沐老師的教程，學(xué)習(xí)了，謝謝分享

作者: 黑郁金香 時(shí)間: 2008-9-24 21:32
學(xué)習(xí)了

作者: 禾苗 時(shí)間: 2008-12-6 17:08
$\"\"$

pacity2 = \".5\" focus = \"0%\" focusposition = \"1,1\" focussize = \"0,0\">

pacity2 = \".5\" focus = \"0%\" focusposition = \"1,1\" focussize = \"0,0\">pacity2 = \".5\" focus = \"0%\" focusposition = \"1,1\" focussize = \"0,0\">

作者: 禾苗 時(shí)間: 2008-12-6 17:08
$\"\"$

pacity2 = \".5\" focus = \"0%\" focusposition = \"1,1\" focussize = \"0,0\">

pacity2 = \".5\" focus = \"0%\" focusposition = \"1,1\" focussize = \"0,0\">pacity2 = \".5\" focus = \"0%\" focusposition = \"1,1\" focussize = \"0,0\">

歡迎光臨中畫網(wǎng) (http://www.nujv.cn/)