变化滤镜效果
关键词:滤镜效果:滤镜,滤镜效果
仅供学习使用
点击查看:滤镜效果
<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;}
#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="http://www.forasp.cn/images/logo2.gif" 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>
<div id=id_div3><br><span id=id_span3>©2002 Rainer Su . All rights reserved . Terms of Use .</span></div>
</body>
</html>
原版所有: 苏昱作品·版权所有