文本特效-半透明的文本效果

[内容提要]　本实例演示如何在网页上输出可以调节透明度的文本。向网页上添加两个按钮和一个DIV层，如图1-9所示。图1-9设计完成的网页设置DIV图层的id为oFilterDIV，将图层的style属性中的filter设置为DXImageTransform.Microsoft.Alph...

作者: 优内科技来源: 优内科技驻站日期:2008/11/12 【加入收藏】【打印此页】【关闭】

本实例演示如何在网页上输出可以调节透明度的文本。

向网页上添加两个按钮和一个DIV层，如图1-9所示。

图1-9 设计完成的网页

设置DIV图层的id为oFilterDIV，将图层的style属性中的filter设置为DXImageTransform.Microsoft.Alpha，并且在图层中显示文本：

<DIV ID="oFilterDIV"

STYLE="PADDING-RIGHT: 10px; PADDING-LEFT:

10px; BACKGROUND: green;

FILTER: progid:DXImageTransform.Microsoft.Alpha(

Opacity =40, FinishOpacity=20, Style=0,

StartX=0, FinishX=100,

StartY=0, FinishY=100);

LEFT: 10px; PADDING-BOTTOM: 10px;

FONT: bold 18pt verdana;

WIDTH: 240px; PADDING-TOP: 10px;

POSITION: absolute;

TOP: 50px; HEIGHT: 160px">

凤凰台上凤凰游，凤去台空江自流。

总为浮云能蔽日，长安不见使人愁。

</DIV>

添加按钮的响应代码：

function Inc_onclick()

{

oFilterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity=

oFilterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity-10

}

这样，每次单击按钮时都会将DIV图层中DXImageTransform.Microsoft.Alpha的透明度增加10。

添加按钮的响应代码：

function Dec_onclick()

{

oFilterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity=

oFilterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity+10

}

这样，每次单击按钮时都会将DIV图层中DXImageTransform.Microsoft.Alpha的透明度减小10。

<HTML>

<HEAD>

<!--

function Inc_onclick()

{

oFilterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity=

oFilterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity-10

}

function Dec_onclick()

{

oFilterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity=

oFilterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity+10

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<STYLE>

INPUT.aFilter

{

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

}

</STYLE>

<DIV ID="oFilterDIV"

STYLE="PADDING-RIGHT: 10px; PADDING-LEFT:

10px; BACKGROUND: green;

FILTER: progid:DXImageTransform.Microsoft.Alpha(

Opacity =40, FinishOpacity=20, Style=0,

StartX=0, FinishX=100,

StartY=0, FinishY=100);

LEFT: 10px; PADDING-BOTTOM: 10px;

FONT: bold 18pt verdana;

WIDTH: 240px; PADDING-TOP: 10px;

POSITION: absolute;

TOP: 50px; HEIGHT: 160px">

凤凰台上凤凰游，凤去台空江自流。

总为浮云能蔽日，长安不见使人愁。

</DIV>

<INPUT class=aFilter

type=button value=+

name=Inc size=53

language=javascript

style="width: 38px; height: 24px"

onclick="return Inc_onclick()">

<INPUT class=aFilter

style="width: 38px; height: 24px"

type=button size=53

value=- name=Dec

language=javascript

onclick="return Dec_onclick()">

</BODY>

</HTML>

保存文件，在浏览器中浏览网页文件，初始画面如图1-10所示。

图1-10 初始画面

单击和按钮可以调整文本的透明度，单击后的结果如图1-11所示。

图1-11 半透明的文本效果

收藏到网摘：