BasicImage滤镜效果
关键词:css css特效,滤镜特效,BasicImage滤镜效果
查看效果:BasicImage滤镜效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>BasicImage滤镜效果</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;}
#idDiv{width:80%;height:80px;background-color:#000000;color:#FFFFFF;padding:4px;filter:progid:DXImageTransform.Microsoft.BasicImage();}
</style>
<script>
var sFilter="filter : progid:DXImageTransform.Microsoft.BasicImage(";
function rdl_change(e){
var oDiv=document.all("idDiv");
with (document.all("idSel")) var sValue=options[selectedIndex].value;
if (sValue=="Mask=1") oDiv.filters[0].MaskColor=0xFFFFFF;
eval("oDiv.filters[0]."+sValue);
}
</script>
</head>
<body>
<div id=idDiv><img src="http://www.forasp.cn/images/logo2.gif" style="float:left;">请从下方选择滤镜效果。</div>
<br>
<select id="idSel" onchange="rdl_change();">
<option value="GrayScale=1">灰度(GrayScale)
<option value="Mirror=1">反转(Mirror)
<option value="opacity=0.5">透明(opacity)
<option value="XRay=1">X光(XRay)
<option value="Invert=1">反相(Invert)
<option value="Mask=1">遮罩(Mask)
<option value="Rotation=2">旋转(Rotation)
</select>
<br>
</html>