使用VML打造可改變大小的圓框

2012/11/8 17:21:17作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

使用VML打造可改變大小的圓框

【實(shí)例描述】

在網(wǎng)頁(yè)中畫(huà)一個(gè)圖片并不是簡(jiǎn)單的事情，因?yàn)槠洳惶峁ヽ#語(yǔ)言中的GDI類(lèi)庫(kù)。本例學(xué)習(xí)如何使用VML輕松地畫(huà)一個(gè)圓框。VML相當(dāng)于IE里的畫(huà)筆，能實(shí)現(xiàn)幾乎所有想要的圖片，而且結(jié)合JavaScript腳本還可以讓圖片產(chǎn)生動(dòng)態(tài)的效果。

【實(shí)例代碼】

<html Xmlns:v="urn:schemas-microsoft-com:vml"> 
<style> 
<!-- 
v\:* {behavior:url(#default#VML);} 
--> 
</style> 
<body onmousemove='with(document.all.test.style)
{width=event.x;height=event.y;}'> 
<v:oval id=test style="width: 100; height: 100"> 
<v:stroke weight="1px" color="navy"/> 
</v:oval>
</body>
</html>

【運(yùn)行效果】使用VML打造可改變大小的圓框運(yùn)行效果

【難點(diǎn)剖析】

在VML里標(biāo)記使用的是Xml擴(kuò)展，這需要一個(gè)命名空間_可以使用慣用的“v”作為命名空間，這就形成本例代碼的第一行。樣式表中的內(nèi)容主要作用是把命名空間“v”和系統(tǒng)預(yù)定義的VML行為連接起來(lái)?！皏：oval”和“v：stroke”是VML中的一些圖片分類(lèi)。具體的圖片定義可參考VML的相關(guān)資料。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：使用VML打造可改變大小的圓框進(jìn)行本實(shí)例源碼下載

標(biāo)簽： VML 圖片圓框