javascript 控制 CSS 滤镜（1） - JavaScript论坛

问题点数：0 回复次数：0

javascript 控制 CSS 滤镜（1）

<head>
<style>

</style>

<script language="JavaScript1.2">
function glowit2(which)
{
if (document.all.glowtext.filters[0].strength==2)
document.all.glowtext.filters[0].strength=1
else
document.all.glowtext.filters[0].strength=2
}

function alphait2(m)
{
if (document.all.alphalv.filters[0].opacity==80)
{
document.all["alphalv"].filters[0].opacity=50
alphalv.style.color="red" //参考http://blog.
}
else
{
document.all.alphalv.filters[0].opacity=80
alphalv.style.color="green"
}
}

var h=0;
function blurit()
{
document.all.blurmh.filters[0].pixelradius=h;
h++;
if (h==4)
h=0;
//return h;
}

function blurit2()
{
if (document.all["blurmhb"].filters[0].strength==10) //中括号可用小括号代替all("blurmhb")
document.all["blurmhb"].filters[0].strength=0;
else
document.all["blurmhb"].filters[0].strength=10;
}

function dropshadowit()
{
if (document.all.dropshadowxl.filters[0].positive==true)
document.all.dropshadowxl.filters[0].positive=false;
else
document.all.dropshadowxl.filters[0].positive=true;
}

function startglowing()
{
if (glowtext)
setInterval("glowit2(0)",150)
}

function startblurring()
{
if (blurmh)
setInterval("blurit()",1000)
}

function startblurring2()
{
if (blurmhb)
setInterval("blurit2()",300)
}

function startdropshadow()
{
if (dropshadowxl)
setInterval("dropshadowit()",1000)
}

function startalpha(m)
{
startglowing();
startblurring();
startblurring2();
startdropshadow();

if (alphalv)
setInterval("alphait2(0)",500)
}

window.onload=startalpha;
</script>

<body>
<span id="glowtext">医疗土方便利，有的是免费的，可以减缓医保压力。</span><P>
<span id="alphalv">现在住房是一个难题，房子很贵；大家想想办法解决。</span><P>
<span id="blurmh">除此之外，社保退休金对于解决日常生活来说未来应该不成问题。第三产业蓬勃发展，缴税支持。</span><P>
<span id="blurmhb">现在网上讨论个税征缴的起点问题实际上就是很好的民意征集。</span><P>
<span id="dropshadowxl">钱是我们最好要了解的东西，最好喜欢上它，它是一门必须掌握的管理学。</span><P>

<p> <p> <p> <p>
解释：
1) Glow光晕滤镜通道：其中color代表发光的颜色，strength指定发光的强度，参数值为1-255。Glow滤镜能使文字或者图片实现发光的特效。
2) Alpha灰度滤镜通道：其中opacity代表透明度等级，可选值为0-100，0代表完全透明，100代表完全不透明。style参数指定了透明区域的形状特征。其中0代表统一形状，1代表线形，2代表圆形放射渐变，3代表矩形放射渐变。当style为2或者3的时候，startX与startY就没有意义了，因为那时设定的是以文字或图片为中心，四周为结束的变化。
3) Blur模糊滤镜通道：其中makeshadow设置对象的内容是否被处理为阴影，pixelradius设置模糊效果的作用深度，shadowopacity设置是用makeshadow制作成的阴影的透明度。
4) Blur模糊滤镜通道2：其中add为是否显示原图片，direction参数用来设置模糊方向，模糊效果是按顺时针方向进行的，其中0度代表垂直向上的模糊方向，每45度一个单位，默认为270度。strength参数要为整数，代表有多少像素宽度受到模糊影响默认值为5px.
5) Dropshadow下落的阴影滤镜通道：color代表投射阴影的颜色，offx和offy分别代表x方向和y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表x轴的右方向和y轴的下方向，反之相反。positive参数有两个值，true为任何非透明像素建立可见的投影，false为透明的像素部分建立可见的投影。

</body>