?? 14-3 “gradient”濾鏡.htm
字號:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>14-3 “Gradient”濾鏡</title>
<style>
* { font-size:12px; font-family:宋體, Arial; } /*規定了所有的字體樣式*/
body { overflow:auto; }
#hutia1, #hutia2, #hutia3 {
position:absolute; left:10px; top:50px; padding:10px;
width:240px; height:180px; font-size:20px; font-weight:bold; color:red;
}
#hutia1 { filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFF0000', endColorStr='#00FF0000'); }
#hutia2 { filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0000FF00', endColorStr='#FF00FF00'); }
#hutia3 { filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000FF', endColorStr='#000000FF'); }
</style>
<script>
//初始化函數
window.onload = function(){
//設定藍色分量的漸變方向為橫向
$("hutia3").filters[0].GradientType = 1;
//初始化“透明度”下拉列表框
setSltOp(1);
}
//設定對應分量的不透明度
function setOp(i){
var obj, strOp;
//獲取對應色彩層對象
obj = $("hutia"+$("sltObj").value);
//計算16進制的不透明度字符串
strOp = parseInt(i/100*255).toString(16);
strOp = (strOp.length>1 ? "":"0") + strOp;
//設定對應的濾鏡參數
if($("sltObj").value==2){
obj.filters[0].endColorStr = obj.filters[0].endColorStr.replace(/^#../, "#" + strOp);
}else{
obj.filters[0].startColorStr = obj.filters[0].startColorStr.replace(/^#../, "#" + strOp);
}
}
//改變所選擇的分量時，更改相應的不透明度的顯示
function setSltOp(i){
var obj, iOp, iOpIndex;
//獲取對應色彩層對象
obj = $("hutia"+i);
//解析對應的色彩字符串，得到當前的不透明度
if(i==2){
iOp = parseInt(obj.filters[0].endColorStr.substring(1,3), 16);
}else{
iOp = parseInt(obj.filters[0].startColorStr.substring(1,3), 16);
}
//計算對應的下來列表框的選項序號
iOpIndex = parseInt(iOp/255*10);
//選擇對于的選項
$("sltOp").options[iOpIndex].selected = true;
}
function $(str){ return(document.getElementById(str)); }
</script>
</head>
<body>
色彩分量：
<select onchange="setSltOp(this.value);" id="sltObj">
<option value="1">紅</option>
<option value="2">綠</option>
<option value="3">藍</option>
</select>
不透明度：
<select onchange="setOp(this.value);" id="sltOp">
<script>for(var i=0;i<101;i+=10)document.write("<option value=\""+i+"\">"+i+"%</option>");</script>
</select>
<!-- 對應的三個色彩層 -->
<div id="hutia1">這里是文本內容</div>
<div id="hutia2">這里是文本內容</div>
<div id="hutia3">這里是文本內容</div>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -