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

JS代碼實現(xiàn)圖片的模糊效果

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

移動端

【實例名稱】

JS代碼實現(xiàn)圖片的模糊效果

【實例描述】

很多網(wǎng)站中圖片的模糊效果使用Photoshop完成，其實CSS同樣提供了實現(xiàn)模糊效果的慮鏡。本例學(xué)習(xí)如何實現(xiàn)圖片的模糊效果。

【實例代碼】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無標(biāo)題頁-學(xué)無憂（wangbatian.cn）</title>
</head>
<body>
    <p><font face="Arial" color="#008080">
    <div><p align="center">
    <img  style="filter:blur(add=0,direction=45,strength=10)"
 src="logo1.gif" width="160" height="103"> </p>
    </div>
    </font>
    <p align="center">這是圖片的模糊效果</p></font>
</body>
</html>


 
【運(yùn)行效果】

 圖片的模糊效果運(yùn)行效果

【難點剖析】

本例的重點是CSS的濾鏡“filter：blur”，其中“blur”的語法如下所示：
各參數(shù)的說明如下：
·Add：一般為l或o；
·Direction：角度，0～315度．步長為45度；
·Strength：效果增長的數(shù)值．一般取5即可。

【源碼下載】

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

標(biāo)簽： JS代碼  圖片  模糊效果