滤镜应用在图片中的实例

滤镜应用在图片中的实例

Alpha 滤镜 : 线形 <img src=http://bbs.51js.com/images/51js/51js.gif style=’filter: Alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=468,finishy=60)’><br>
Alpha 滤镜 :放射状<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter: Alpha(opacity=100,finishopacity=0,style=2,startx=0,starty=0,finishx=468,finishy=60)’><br>
Alpha 滤镜 :长方形<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter: Alpha(opacity=100,finishopacity=0,style=3,startx=0,starty=0,finishx=468,finishy=60)’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:blur(add=ture,direction=135,strength=100)’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:filph’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:filpv’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:chroma(color=white)’><br>
<p style=’filter:dropshadow(color=#ff0080,offx=5,offy=5.positive=0)’>样式表滤镜实例</p><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:glow(color=blue,strength=10)’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:gray’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:invert’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:xray’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:light’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:mask(color=white)’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:shadow(color=red,direction=225)’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10)’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:wave(add=add,freq=2,lightstrength=30,phase=50,strength=5)’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=’filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)’><br>
<img src=http://bbs.51js.com/images/51js/51js.gif style=”><br>
<img STYLE=”filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’,m11=0.7071067690849304,m12=-0.7071067690849304,m21=0.7071067690849304,m22=0.7071067690849304)” src=”>
<script language=”JavaScript1.2″>
function f1(){
setInterval(“mdiv.filters.wave.phase+=10”,100);
}
window.onload=f1
</script>
<img id=”mdiv” src=”” style=”filter:wave(strength=2,freq=1,phase=0,lightstrength=20)  blur()” width=”468″ height=”60″>

<html xmlns:rdl>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>Rainer’s Handbook</title>
<style>
body{margin:0px;padding:16px;background:#FFFFFF;overflow:auto;}
body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;}
table,img{border:0px;}
a{text-decoration:none;color:#003399;}
a:hover{color:#000000;text-decoration:underline;}
#id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;}
#id_span3{font-size:10px;font-family:tahoma;}
</style>
<style>
#idDiv{width:80%;height:80px;background-color:#FF6633;color:#FFFFFF;padding:6px;filter : progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=0,finishOpacity=100);}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>

<script>
var sFilter=”filter : progid:DXImageTransform.Microsoft.Alpha(“;
var sCodeEnd=”startX=0, startY=0, finishX=100, finishY=100,”;
function rdl_change(e){
var oCodeDiv=document.all(“idCodeDiv”);
var oDiv=document.all(“idDiv”);
with (document.all(“idSel1”)) var sValue1=parseInt(options[selectedIndex].value);
with (document.all(“idSel2”)) var sValue2=parseInt(options[selectedIndex].value);
with (document.all(“idSel3”)) var sValue3=parseInt(options[selectedIndex].value);
oDiv.filters[0].Style=sValue1;
oDiv.filters[0].Opacity=sValue2;
oDiv.filters[0].FinishOpacity=parseInt(sValue3);
if (sValue1!=1) oCodeDiv.innerText=sFilter+”style=”+sValue1+”,opacity=”+sValue2+”,finishOpacity=”+sValue3+”);”;
else oCodeDiv.innerText=sFilter+sCodeEnd+”style=”+sValue1+”,opacity=”+sValue2+”,finishOpacity=”+sValue3+”);”;
}
</script>

</head>
<body>
<div id=idDiv><img src=”” style=”float:left;”>请从下方选择滤镜参数的值。</div>
<br>
<table><tr><td>
<select id=”idSel1″ onchange=”rdl_change();”>
<option value=”0″>—渐变样式—
<option value=”0″>0
<option value=”1″>1
<option value=”2″>2
<option value=”3″ selected>3
</select>
</td><td>
<select id=”idSel2″ onchange=”rdl_change();”>
<option value=”0″>—开始透明度—
<option value=”0″ selected>0
<option value=”25″>25
<option value=”50″>50
<option value=”75″>75
<option value=”100″>100
</select>
<select id=”idSel3″ onchange=”rdl_change();”>
<option value=”0″>—结束透明度—
<option value=”0″>0
<option value=”25″>25
<option value=”50″>50
<option value=”75″>75
<option value=”100″ selected>100
</select>
</td></tr></table>
<div id=idCodeDiv>filter : progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=0,finishOpacity=100);</div>

<br> <br> <br>
</body>
</html>

 

滤镜应用在图片中的实例

相关文章:

你感兴趣的文章:

标签云: