當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > JS代碼實現(xiàn)圖片變形效果

JS代碼實現(xiàn)圖片變形效果

2012/11/7 18:52:18作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

JS代碼實現(xiàn)圖片變形效果

【實例描述】

在網(wǎng)頁中可以通過CSS濾鏡改變圖片的顯示方式。本例學(xué)習(xí)如何實現(xiàn)圖片的變形效果。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無標(biāo)題頁-學(xué)無憂（www.wangbatian.cn）</title>
</head>
<body>
    <p><font face="Arial" color="#008080">
    <div><p align="center">
    <img  style="filter:wave(add=0,freq=1,lightStrength=20,
phase=50,strength=20)" src="LOGO1.gif" width="160" height="103"> 
    </p>    </div>    </font>
    <p align="center">這是圖片的變形效果</p></font>
</body>
</html>


 
【運行效果】

 圖片變形效果運行效果

【難點剖析】

本例的重點是css中“filter”濾鏡的使用?！皐aVe”屬性表示以波浪的形式顯示圖片。

參數(shù)的說明如下：
·Add：一般為1或0；
·Freq：變形值；
·Lightstrength：變形百分比；
·Phase：角度變形百分比；
·strengm：變形強(qiáng)度。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：圖片變形效果 進(jìn)行本實例源碼下載 

標(biāo)簽： JS代碼  圖片  變形效果