当前位置：网络学院首页 >> 设计教程 >> web标准 >> css滤镜应用在图片中的实例 Js+css特效喜欢绚丽的可以看看

css滤镜应用在图片中的实例 Js+css特效喜欢绚丽的可以看看

来源：中国设计秀作者：点击：175 加入收藏

<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="http://www.98062.com/picsave/iori/032.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>
</body>
</html>

<html>
<head>
<title>asp学习网 aspxuexi.com 测试页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
<script language="javascript">

</script>
</head>
<body onload="k()">
<img src=http://www.aspxuexi.com/page/images/asp.gif>
<img src=http://www.aspxuexi.com/page/images/asp.gif>
<img src=http://www.aspxuexi.com/page/images/asp.gif>

</body>
</html>

<BODY>
<OBJECT ID="DAControl" STYLE="position:absolute; left:200; top:125; width:350; height:300; z-index: -1" CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">
</OBJECT>
<DIV ID="oDiv" STYLE="WIDTH:250; FILTER:redirect">
<P><IMG SRC="http://www.aspxuexi.com/page/images/asp.gif"></P>
</DIV>
<SCRIPT LANGUAGE="JScript">
oLib = DAControl.MeterLibrary;
oFilter = oDiv.filters[0];
oImage = oFilter.elementImage();
DAControl.Image = oImage.Transform(oLib.Rotate2RateDegrees(100)) ;
DAControl.Start();
</SCRIPT>
</BODY>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Filter sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">

<script defer>
function InitializePage()
{
BuildColorTable();
}
</script>





<BODY onload="InitializePage()" TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">

<DIV id="div1" style="position: absolute; top:20; left:20; width:130; height:130; font-size:100; text-align:center; background-color:red; filter: revealTrans(Transition=1, Duration=.01)" onclick=Count() onfilterchange=Repeat()></DIV>
<div style="position:absolute; top:150; left:20"><br>Click the square to see something cool!</div>
<br>

<script>
var iMaxTransition = 23; // maximum number of transitions supported
var iTransNumber = iMaxTransition; // current transition
var speed = 1.5; // initial speed of transition
var fRunning = 0;
var speedDirection = 0;

var garTransitions = new Array(24); //arrary of filter strings
var g_aColors = new Array(24); // array of colorpair objects

garTransitions[0] = "progid:DXImageTransform.Microsoft.RandomDissolve()";
garTransitions[1] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='star', motion='out')";
garTransitions[2] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='diamond', motion='in')";
garTransitions[3] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='cross', motion='out')";
garTransitions[4] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='circle', motion='in')";
garTransitions[5] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='square', motion='out')";
garTransitions[6] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='plus', motion='in')";
garTransitions[7] = "progid:DXImageTransform.Microsoft.Barn(orientation='vertial' motion='in')";
garTransitions[8] = "progid:DXImageTransform.Microsoft.Barn(orientation='vertial' motion='out')";
garTransitions[9] = "progid:DXImageTransform.Microsoft.Barn(orientation='horizontal' motion='in')";
garTransitions[10] = "progid:DXImageTransform.Microsoft.Barn(orientation='horizontal' motion='out')";
garTransitions[11] = "progid:DXImageTransform.Microsoft.Pixelate()";
garTransitions[12] = "progid:DXImageTransform.Microsoft.Inset()";
garTransitions[13] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction='left')";
garTransitions[14] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction='right')";
garTransitions[15] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction='down')";
garTransitions[16] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction='up')";
garTransitions[17] = "progid:DXImageTransform.Microsoft.RandomBars(motion='horizontal')";
garTransitions[18] = "progid:DXImageTransform.Microsoft.RandomBars(motion='vertical')";
garTransitions[19] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slideStyle='push')";
garTransitions[20] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slidestyle='swap')";
garTransitions[21] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slidestyle='hide')";
garTransitions[22] = "progid:DXImageTransform.Microsoft.Spiral()";
garTransitions[23] = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push')";

// constructor for a color pair object. holds a foreground and a background color.
function ColorPair(sColor, sBGColor)
{
this.m_color = sColor;
this.m_bgColor = sBGColor;
}

// build a global table of foreground/background color pairs.
// Initially these were calculated, but, due to collisions, the use of a table guarantees
// that the fg/bg colors never match. If a new transition is added the table must be expanded
function BuildColorTable()
{
g_aColors[0] = new ColorPair('#000000', '#FFFFFF');
g_aColors[1] = new ColorPair('#035b60', '#6174c0');
g_aColors[2] = new ColorPair('#033450', '#10a9a0');
g_aColors[3] = new ColorPair('#030d40', '#0fde80');
g_aColors[4] = new ColorPair('#02e630', '#0f13d0');
g_aColors[5] = new ColorPair('#02bf20', '#6e4840');
g_aColors[6] = new ColorPair('#d29810', '#0d7d20');
g_aColors[7] = new ColorPair('#f27100', '#0cb200');
g_aColors[8] = new ColorPair('#0249f0', '#0be6e0');
g_aColors[9] = new ColorPair('#0222e0', '#ff0000');
g_aColors[10] = new ColorPair('#01fbd0', '#0a50a0');
g_aColors[11] = new ColorPair('#01d4c0', '#098580');
g_aColors[12] = new ColorPair('#a1adb0', '#08ba60');
g_aColors[13] = new ColorPair('#0186a0', '#07ef40');
g_aColors[14] = new ColorPair('#015f90', '#072420');
g_aColors[15] = new ColorPair('#a13880', '#065900');
g_aColors[16] = new ColorPair('#011170', '#058de0');
g_aColors[17] = new ColorPair('#00ea60', '#04c2c0');
g_aColors[18] = new ColorPair('#00c320', '#03f7a0');
g_aColors[19] = new ColorPair('#009c40', '#032ca0');
g_aColors[20] = new ColorPair('#00e530', '#026160');
g_aColors[21] = new ColorPair('#004e20', '#019640');
g_aColors[22] = new ColorPair('#002710', '#00cb20');
g_aColors[23] = new ColorPair('#038270', '#123fe0');
}

function Repeat()
{
fRunning = 0;
Count();
}

function Count()
{
if (fRunning == 0)
{
fRunning = 1;
div1.style.filter = garTransitions[iTransNumber];
div1.filters[0].apply();
div1.innerText = iTransNumber;
if (iTransNumber <= g_aColors.length) // bounds check just in case
{
div1.style.backgroundColor = g_aColors[iTransNumber].m_bgColor;
div1.style.color = g_aColors[iTransNumber].m_color;
}

div1.filters[0].play(speed);

if (iTransNumber == 0)
{
iTransNumber = iMaxTransition; // take it from the top
return;
}

iTransNumber--;

if ( speed > .01)
{
speed=(speed*31)/32;
}

}
}
</script>

</BLOCKQUOTE>
</BODY>
</HTML>

代码解析：

对这里用到的几个参数进行说明：
“0”没有渐进

“1”直线渐进

“2”圆形渐进

“3”矩形渐进

“opacity”为不透明的程度百分比。

“Opacity”代表透明度水准，范围是0---100，其实就是百分比的意思，如果你想变为全透明，那么就用0代替Opacity后面的问号。

“FinishOpacity”就是用来指定结束时的透明度，范围跟Opacity一样（FinishOpacity为可选参数，不想要的话就去掉它。

“Style”是指定透明区域的形状特征，0代表统一形状，1代表线形，2代表放射形，3代表长方形。比如我们一般可以写成Style=1。

“startX”与”startY”就是代表渐变效果开始的X与Y坐标，（坐标应该知道是什么吧）一般我们设置为StartX=0， StartY=0（这样就是表示的透明效果是从图片的左上角开始的。）

“FinishX”与“FinishY”，当然，这个就是代表渐变效果结束时的横纵坐标了。这里很关键，填什么数值那就要看你的图片高与宽了。假设我们的图片高与宽分别是100、200像素，那么就可以写成FinishX=200，FinishY=100。（如果你只想要一半的面积是透明，那么可以设置成FinishX=100， FinishY=50）。

“FlipH”滤镜，使图片水平翻转。“FlipH”滤镜是CSS的6个无参数滤镜中的一个，可直接使用，在Dreamweaver中可以同有参数的滤镜一样使用。

“FlipV”滤镜，使图片垂直翻转。

“invert”滤镜，使图片出现照片底片的效果。

“xray”使图片出现X光照射的轮廓效果。

顶一下

2007-10-22 12:19:00 出处：

本文引用地址：http://www.cnwebshow.com/edu/html/article_1411.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板

css滤镜 应用在图片中的实例 Js+css特效 喜欢绚丽的可以看看

css滤镜应用在图片中的实例 Js+css特效喜欢绚丽的可以看看