CSS特效赏析

转载

mb5fcdf3fd1fd25 2007-06-04 15:13:00

文章标签 javascript html css ide 滤镜 文章分类 代码人生

从现在开始，我将向您介绍一系列的CSS作品，这些大都是CSS与JavaScript结合起来产生的特效。您可以通过对这些特效的欣赏，进一步领略到CSS的强大功能。

1、动态改变样式

我们先来看一个较简单的特效，这里只是用到了属性和鼠标事件。

　　请把鼠标移到蓝色背景的文字下面。

　　我们使用“class”类属性来改变文档的样式。放大这段文本。

这个例子的代码是这样的：

　　<html>

　　<head>

　　<title>change style</title>

　　<style>

<!--

　　.bigchange{color:blue;font-weight:bolder;font-size:225%;

　　letter-spacing:4px;background:yellow;}

　　//*定义bigchange类的字体的颜色、粗细、大小，字间距，背景色*//

　　.start{color:yellow;background:navy;}

　　//*定义start类的字体的颜色和背景色*//

　　 -->

　　</style>

　　</head>

　　<body>

　　<h1>动态改变样式</h1>

　　<p>请把鼠标移到蓝色背景的文字下面。</p>

　　<p>我们使用"class"类属性来改变文档的样式。

　　<span onmouseover="this.className='bigchange'"

　　onmouseout="this.classname='start'"

　　　　　　　　style="cursor:hand">

　　放大这段文本。 </span> </p> </body>

　　//*定义鼠标触发事件，当鼠标放上去的时候，区域内以bigchange类的格式显示，

　　当鼠标离开的时候，以start类显示*//

　　</html>

　　这个例子很简单，容易理解，就不多说什么了，下一节将向您介绍一个动态显示的例子。

2、动态可视化效果

这一节我们讲一个动态显示的例子，。

实现这种显示/隐藏效果的代码如下：

　　<html>

　　<head>

　　<title> dtksh </title>

<!--

　　function caption() {

　　if(bobo.style.visibility=="hidden")

　　 { bobo.style.visibility="" sway.style.visibility="" }

　　else{ bobo.style.visibility="hidden"

　　　　　 sway.style.visibility="hidden" }

　　　}

　　 -->//*定义一个函数，使bobo、sway两个类隐藏*//

　　</script>

　　</head>

　　<body>

　　<div id="bobo" style="visibility:hidden;position:absolute;

　　top:20;left:15; width:190;height:35;

　　background-color:rgb(62,174,128);

　　filter:alpha(opacity=60)"> </div>//*定义一个类bobo*//

　　div id="sway" style="visibility:hidden;color:rgb(177,63,174);

　　　position:absolute;top:20; width:190;height:100;

　　　margin-top:5;margin-left:5;">//*定义一个类sway*//

　　<p style="font-family:bailey;font-size:14pt;

　　font-weight:bold;text-align:center"> Sports is wonderful! </p>

　　</div> <p>//*写一行字，在sway类定义下*///

　　<img src="ss07049.jpg" onmouseover="caption()"

　　onmouseout="caption()"> </p>//*导入一张图片*//

　　　请把您的鼠标移动到图片上，然后再把鼠标从图片上挪开。

　　</p> </body>

　　</html>

　　下一节将向您介绍一个动态滤镜转换的例子。

3、动态滤镜显示

本节将向您介绍一个动态滤镜显示的例子中，在这个例子中您可以随意改变透明度的开始值、结束值和样式（style）。。

这个例子先是在<head>中加入了一段JavaScript语句，代码如下：

<!--

　　function setfilter(){

　　myimage.filters.alpha.opacity=document.forms(0).opacity.value

　　myimage.filters.alpha.finishopacity=

　　document.forms(0).finishopacity.value

　　myimage.filters.alpha.style=document.forms(0).setstyle.value }

　　-->

　　</script>

　　这段代码定义图片的透明度等于表单中输入的对应的透明度的值。myimage是一个类

，标识图片。它的CSS样式是这样定义的：

　　<img id="myimage" src="ss07075.jpg"

　　style="filter:alpha();position:absolute;top:10;left:0;">

　　最后，在图片下方加入三个表单，分别对应输入初始透明度、结束透明度和样式值

，通过透明度的改变，使隐藏在图片下的文字显示出来。

下一节将向您介绍一种特殊的滤镜效果。

4、Blentrans属性

　　本节介绍一种特效，它应用到的是CSS中的混合转换滤镜blendtrans。请您先看一下

下面这个例子：

滤镜效果

使用方法 请单击这里使文字淡出，再次单击后可以使文字逐渐出现。

我们为这段文字加上的逐渐淡出的多媒体效果。

　　看到了吗？这是一种淡入淡出的效果。让我们来看一下而这种效果用到的转换属性

blendtrans的语法：

Filter：BlendTrans（duration=淡入或淡出的时间，以秒作单位)

　　我们看到了BlendTrans属性只有一个属性值duration，它指定了对象淡入淡出的时

间。

上面的例子的源代码如下所示：

　　<html>

　　<head>

　　<title> dhtml</title>

　　<style>

<!--

　　em{color:red;cursor:hand;font-size:14pt}

　　-->

　　</style> </head>

　　<body>

　　请单击<b><em style="color:red">这里</em></b>使文字淡出，

　　再次单击后可以使文字逐渐出现。</p>

　　<div style="width:100%;color:red; 　　　　　　　　　　　　

　　filter:blendtrans(duration=3)">

　　<p> 我们为这段文字加上的逐渐淡出的多媒体效果。</span></p> </div>

<!--

　　var curobj;

　　function togglemultimedia(){

　　if (curobj.filters(0).status==2){ curobj.filters(0).stop();

　　if (curobj.style.visibility=="hidden")

　　curobj.style.visibility="visible";

　　else curobj.style.visibility="hidden"; 　　　　　　　　　　　　　　　　

　　window.settimeout("togglemultimedia()",1); }

　　curobj.filters(0).apply();

　　if (curobj.style.visibility=="hidden") 　　　　　　　　　　　　　　　　

　　curobj.style.visibility="visible";

　　else curobj.style.visibility="hidden"; curobj.filters(0).play(); }

　　-->

　　</script> </body>

　　</html>

　　除了文字外，图片是不是也能实现这种混合效果呢？答案是肯定的。下一节将向您

介绍图片的混合转换滤镜效果和显示转换滤镜效果。

5、RevealTrans属性

　　上一节我们介绍了混合转换滤镜的一个例子，本节我们来看一下RevealTrans属性

，RevealTrans属性提供了更加多变的转换效果。它的书写格式是这样的：

Filter:revealtrans(duration=转换的秒数，transition=转换的类型）

　　表达式中的transition参数的参数值有24中，以代号0-23来表示，分别代表24中显

示类型，具体的参数值列表如下图所示：

　　下面的两个例子，一个是应用了上一节讲的blendtrans属性，一个是应用了本节所

说的revealtrans属性。

请点击下面的两幅图，看完效果后请点击IE的刷新按钮。

　　我们看到将revealtrans属性的transition参数值设置为23，为随机选取模式，显

示的是更为多变的效果。

下一节我将向您介绍一种发光特效。

6、动态Glow属性

　　还记得在教程中讲过的Glow滤镜属性吗？下面这个例子动态的把它演示出来。

　　请您点击下面的这段文字：

洪恩在线求知无限

怎么样，是不是有一种燃烧起来的感觉，反复点击文字将不断的发光。实现这种效果是很简单的，代码如下：

　　<html>

　　<head>

<!--

　　function zap() {

　　if(myimg.filters.glow.enabled==1) {myimg.filters.glow.enabled=0; }

　　if(myimg.filters.blendtrans.status==0)

　　{myimg.filters.blendtrans.apply();

　　myimg.filters.glow.enabled=1; myimg.filters.blendtrans.play(); } }

　　--> </script>

　　</head>

　　<div onclick="zap()"

　　style="font-family:行书体;font-size:54;height:200;color:#ff9900;

　　filter:glow(color=#9999ff,strength=20,enabled=0)

　　blendtrans(duration=2)"> <p>洪恩在线求知无限</p> </div>

　　</body>

　　</html>

　　我们看到代码中还应用到了blendtrans属性，使您在点击后字体的变化有一种淡化

的效果。

　　从下一节开始，我将向您介绍一些利用CSS-P的知识做出来的特效例子。　

7、显示和隐藏

我们来看一下这个例子，点击图片下方的文字使图片显示/隐藏

显示- show 隐藏- hide

我们来看一下这个例子的源代码：

　　<html>

　　<head>

<!--

　　ns4 = (document.layers)? true:false

　　ie4 = (document.all)? true:false

　　function init() {

　　if (ns4) block = document.blockDiv

　　if (ie4) block = blockDiv.style }//*设置对象block*//

　　function showObject(obj) {

　　if (ns4) obj.visibility = "show"

　　else if (ie4) obj.visibility = "visible" }

　　function hideObject(obj) {

　　if (ns4) obj.visibility = "hide"

　　else if (ie4) obj.visibility = "hidden" }

　　//*定义两个函数分别用来显示、隐藏对象block*//

　　//--> </script> </head>

　　//*两个超链接调用javascript中的两个函数*//

　　<div style="position:absolute; left:50; top:100;

　　width:200; visibility:visible;">

　　<img src="ss01094.jpg" border=0> </DIV> //*导入一张图片*//

　　</body>

　　</html>

　　我们看到这段代码有一些不同于前面的例子的特点。其实CSS大部分动态的特效都是

DHTML的范畴。

　　也就是说，它们都是CSS与JavaScript结合起来实现的一种效果。另外，上面这个例

子还涉及到了IE和NS兼容的问题。我们将在下一节针对两种浏览器的兼容问题做详细讲

解。

　8、浏览器的兼容问题

　　首先我们来了解一下什么是CSS-P。

　　CSS-P是Cascading Style Sheets Positioning的缩写。从字面上我们可以把它理

解成是用来控制任何元素在页面上或窗口上的位置的。而具体跟CSS-P有关的属性包括以

下这些：

　　Position、Left、Top、Height、Width、Clip、Visibility、Z-index、

Background-color、Layer-background-color、Background-image和Layer-

background-image等。

　　我们看到这些属性在前面的教程中都已经介绍过了，实际上就是CSS定位方面的知识

。

　　谁都知道最常用的两个浏览器是IE和NetScape。我们如何让和JavaScript结合起来

应用的CSS在两个浏览器下都能正常显示呢？

　　我们针对上一节的例子来讲解，它是这样实现兼容的问题的：

　　ns4 = (document.layers)? true:false

　　//*document.layers是NetScape专用的，如果是这种形式，则为NS浏览器*//

　　ie4 = (document.all)? true:false

　　//*document.all是IE专用的，如果是以这种形式，则为IE浏览器*// 　

　　function init() { 　　

　　if (ns4) block = document.blockDiv

　　if (ie4) block = blockDiv.style }

　　//*这里定义了一个函数，初始化对象block，在NS中，对CSS对象的表示方法是：

　　　document.blockdiv.propertyname,这里blockdiv是您可以任意定义的名称。

　　　在IE中，表示方法是：blockdiv.style.propertyname。上面的代码是针对两

　　　种浏览器用不同的格式定义对象block，从而确保了在两种浏览器下都能正常显示

　　　。*//

　　下面我们就来看一个CSS-P与JavaScript结合起来的例子，您可以试一试在两种浏

览器下是否都能正常显示。

　　下一节将向您介绍一个移动的例子。

9、移动

通过下面这个例子，您可以把图片移动到指定的地方。

实现这个例子的代码是这样的：

　　<html>

　　<head>

<!--

　　ns4 = (document.layers)? true:false

　　ie4 = (document.all)? true:false

　　function init() {

　　if (ns4) block = document.blockDiv

　　if (ie4) block = blockDiv.style

　　block.xpos = parseInt(block.left)

　　block.ypos = parseInt(block.top) }

　　//*定义初始函数，两种浏览器下的对象的横向、竖向坐标分别对应于对象相对于窗

　　　口的左端、顶端的位置*//

　　function moveTo(obj,x,y) {

　　obj.xpos = x

　　obj.left = obj.xpos

　　obj.ypos = y obj.top = obj.ypos }

　　//*定义绝对移动函数*//

　　function moveBy(obj,x,y) {

　　obj.xpos += x

　　obj.left = obj.xpos

　　obj.ypos += y

　　obj.top = obj.ypos }

　　//*定义相对移动函数*//

　　function showObject(obj) {

　　if (ns4) obj.visibility = "show"

　　else if (ie4) obj.visibility = "visible" }

　　function hideObject(obj) {

　　if (ns4) obj.visibility = "hide"

　　else if (ie4) obj.visibility = "hidden" }

　　//*定义显示、隐藏函数*//

　　//--> </script> </head>

　　Check Values:

　　<a href="javascript:alert('X: ' + block.xpos)">横向位置</a>,

　　Visibility:

　　<a href="javascript:showObject(block)">显示</a>,

　　移动到 MoveTo:

　　<a href="javascript:moveTo(block,100,200)">(100,200)</a>,

　　<a href="javascript:moveTo(block,200,260)">(200,260)</a>,

　　相对移动 MoveBy:

　　<a href="javascript:moveBy(block,10,0)">(10,0)</a>,

　　<a href="javascript:moveBy(block,-10,0)">(-10,0)</a>,

　　<a href="javascript:moveBy(block,0,10)">(0,10)</a>,

　　//*调用JavaScript中定义的函数*//

　　<div style="position:absolute; left:100; top:200;

　　width:30; visibility:visible;">

　　//*初始化一个区域的原始位置*//

　　</html>

下一节我将向您介绍一个滑动的例子。

10、滑动

　　上一节我们介绍了一个移动的例子，它可以使您随意放置对象的位置。那可不可以

让对象连续移动，从而实现一种动画的效果呢？我们来看个例子，。

怎么样，是不是有一种动起来的感觉，实现这种效果的代码如下：

　　<html>

　　<head>

<!--

　　ns4 = (document.layers)? true:false

　　ie4 = (document.all)? true:false

　　function init() {

　　if (ns4) block = document.blockDiv

　　if (ie4) block = blockDiv.style

　　block.xpos = parseInt(block.left) }

　　//*在两种浏览器下定义对象block，横坐标等于对象距窗口左端的长度*//

　　function slide() {

　　if (block.xpos < 500) {

　　block.xpos += 5

　　block.left = block.xpos

　　setTimeout("slide()",10) }

　　 } //*定义一个滑动函数，当横坐标小于500时，对象距离左端的坐标值，每加5改

　　变一次，后面是一个定时语句*//

　　function moveTo(obj,x,y) {

　　obj.xpos = x

　　obj.ypos = y

　　obj.left = obj.xpos

　　obj.top = obj.ypos }

　　//*定义绝对移动函数，使对象的横坐标等于距离窗口左端的长度，纵坐标等于距离

　　窗口顶端的长度*//

　　//--> </script> </head>

　　<div STYLE="position:absolute; left:50; top:150;

　　width:400;"> //*定义对象的绝对位置*//

　　//*导入一张图片*// </div> </body>

　　</html>

　　本节我们讲述了一个滑动的例子，下一节将向您介绍一种用键盘控制对象移动、滑

动的方法。

11、键盘控制对象

　　本节我们将讲一下键盘控制对象移动的例子。

　　在前面讲过的使对象移动的例子，如果能用键盘来控制，将会大大加强您和电脑之

间的交互性。那么键盘控制怎么实现呢？

　　这需要涉及到事件问题。也就是说需要有一个键盘控制事件来激发键盘按下和松开的状态。这里用到的是“keydown”事件，这个事件的书写格式是这样的：

document.onkeydow=keydown

上面语句中的keydown是一个子程序，也就是说当您的浏览器读到这个子程序时，它就会知道您按下了哪一个键，从而作出相应的反应。我们下面来看一个例子：

请按任意键

当您按下任意键时，弹出了一个窗口，告诉您按下的是哪一个键，并且告诉您该键的内码是多少。实现这种键盘控制的代码如下：

　　<html>

　　<head>

<!--

　　function keyDown() {

　　var keycode = event.keyCode

　　var realkey = String.fromCharCode(event.keyCode)

　　alert("keycode: " + keycode + "\nrealkey: " + realkey) }

　　document.onkeydown = keyDown

　　 //--> </script>

　　//*子程序*//</head>

　　<body>

　　<p >请按任意键</p> </body>

　　</html>

上面的这个例子很简单是一个很简单的例子，在这里您可以看到键盘控制图片移动的例子，您可以看到另外一种形式的移动。

　　好了，本节就讲到这里，下一节将向您介绍鼠标点击控制的例子。

12、鼠标控制

　　上一节我们讲了一个键盘控制的例子，本节我将向您介绍一个鼠标控制的例子。在

下面这个例子中，点击图片上方的超链接，图片就会移动。如果用鼠标一直按住链接不

放的话，图片就会持续移动下去。

实现这种效果的代码如下：

　　<html>

　　<head>

<!--

　　ns4 = (document.layers)? true:false

　　ie4 = (document.all)? true:false

　　function init() {

　　if (ns4) block = document.blockDiv

　　if (ie4) block = blockDiv.style

　　block.xpos = parseInt(block.left)

　　block.active = false }//*兼容两种浏览器*//

　　function slide() {

　　if (block.active) {

　　block.xpos += 5

　　block.left = block.xpos

　　setTimeout("slide()",30) }

　　} //-->

　　</script> </head>

　　请您点击"移动"两个字，再一直按住鼠标左键看一看 <br>

　　<a href="javascript:void(null)"//*不要换网页*//

　　onMouseDown="block.active=true; slide(); return false;"

　　onMouseUp="block.active=false"

　　onMouseOut="block.active=false">移动</a>

　　//*设置鼠标的三种状态，当鼠标按下的时候，激活slide（）函数，开始滑动*//

　　<div

　　style="position:absolute; left:50; top:100; width:250;height:180">

　　</div>

　　</body>

　　</html>

　　其实上面这段代码和键盘控制的代码很相象，只是多了一个超链接的控制。

　　好了，下一节我将向您介绍动态控制对象可视区域的例子，听起来是不是很拗口，

没关系，很有意思的。

13、Clip属性的应用

　　上一节说到了动态可视区的调整，实际上就是Clip属性的应用。

　　Clipping的中文解释就是剪辑的意思，这个属性决定了对象的哪个部位可以被看到。它不会改变任何对象的性质。

　　Clipping 的区域是一个矩形，而这个矩形的尺寸取决于于四个边的位置。

　　这四个边用 top, right, botton, left 来表示。

　　请注意：这四个边的位置是相对于对象的而不是相对于窗口的。

　　Clip属性的书写格式是这样的：

Clip rect（top，right，bottom，left）

在这里，top，right，bottom，left的值都是以像素pixels为单位的。

为了更好的理解相对于对象这个含义

，我们看一个例子，比如左面是一幅

285×185的图片，我们对它加入下面这

段代码：

style="clip:rect(0,200,100,0)"

这段代码使图片将以200×100的形式显

示。这是因为rect中规定的200，代表了图片的右端距离是200pixels，也就是图片的宽度是200pixels；同理， 100定义的则是图片的高度。这样图片就好象被剪辑了一样，将显示成右下图的样子：

　基本原理就介绍这么多，让我们来看两个例子

，一个是静态调整可视区域，一个是动态调整。

　　在这两个例子中，您可以点击对应的链接，得

到图片四条边的位置，可以点击链接使图片的可视

区按照规定的范围显示，还有您可以点击后，使图

片就像放电影一样，慢慢的展开。

　　哇，怎么这么多功能啊！看第一个例子吧。看第二个例子。

　　好了，本节介绍了Clip属性的应用实例，有关CSS-P的知识应用讲的差不多了，下

一节我将向您介绍一个动态字幕变换的例子。

14、动态文字变换

我们先来看下面这个效果：

洪恩在线

怎么样，这种文字渐淡显示的效果还可以吧，实现这种效果的代码如下：

　　<html>

　　<head>

<!--

　　function HelpArray(len){this.length=len }

　　HelpText= new HelpArray(5)

　　HelpText[0]="北京金洪恩电脑有限公司"

　　HelpText[1]="洪恩在线"

　　HelpText[2]="求知无限"

　　HelpText[3]="十二亿中国人的网上大学"

　　HelpText[4]="http://www.hongen.com"

　　ScriptText=new HelpArray(5)

　　//*定义文本数组，一共是五段文本*//

　　var i = -1

　　function playHelp() {

　　if (i==4) { i=0 }

　　else { i++ }

　　div1.filters[0].apply()

　　div1.innerText=HelpText[i]

　　div1.filters[0].play()

　　mytimeout=setTimeout("playHelp()",2500)}

　　//*定义play函数，并且设置了时间间隔*//

　　-->

　　</script>

<style> <!--

　　#div1{position:absolute;top:20;left:20;width:480;height:200;

　　　　　font-family:行书体; color:red;font-size:40;

　　　　　font-weight:bold;text-align:center;

　　　　　filter:revealtrans(transition=12,duration=2) }

　　//*设置显示转换滤镜*//

　　　　　　 -->

　　</style> </head>

　　</body>

　　</html>

好了，本节就讲到这里了，下一节将向您介绍一种动态改变页面样式的例子。

15、动态改变页面样式

我们先来看一下下面这个例子吧，请您用鼠标点击表格中相应的部分看效果。

3:11:48P.M.

时钟颜色	时钟背景	时钟字体	字体尺寸	字体粗细

紫色	红色	无边饰	24pt	普通
白色	黄色	有边饰	36pt	粗体

　　通过点击表格中对应的部分，是表格上方的时钟样式发生了相应的改变。

　　其实，这种效果的实现很简单，那个时钟是用JavaScript实现的。而下面的这个表格的实现代码是这样的：

　　//*引入时钟*//

　　<span onmouseover="this.style.cursor='hand'"

　　　　　onmouseout="this.style.cursor=default"

　　　　　onclick="Clock.style.color='purple'">紫色</span>

　　</td>

　　//*设置鼠标事件，鼠标放上、离开、点击时的状态*//

　　<td >

　　<span onmouseover="this.style.cursor='hand'"

　　　　　onmouseout="this.style.cursor=default"

　　　　　onclick="Clock.style.background='red'">红色</span>

　　</td>

　　……

　　//*省略号代表的代码和“紫色”、“红色”的定义是类似的*//

本节就介绍到这里，下一节将向您介绍一个动态时钟转换的例子。

16、动态时钟控制

　　这个例子会让您看上去觉得眼花缭乱，在输入栏中输入不同的时间间隔会以不同的速度显示。

　　这里面主要用的是revealtrans滤镜属性，在每一个区域内都添加了revealtrans属性，再让它们调用onfilterchange函数。而输入时间间隔是靠javascript的onchange

事件实现的，下面我们把有关CSS的代码列出如下：

　　<span style="position:absolute;top:140;left:20;width:400;

　　　　　　　　 text-align:center; font-size:12pt">

　　<p>输入新的时间间隔。

　　//*定义输入文本框，调用updateTime（）函数*//

　　<div

　　 style="position:absolute;top:20;left:20;width:100;height:100;

　　　　　　font-size:100;text-align:center;background-color:blue;

　　　　　　filter:revealtrans(transition=1,duration=1.5)"

　　　　　　onfilterchange="done(1)">

　　//*设置一个层，包括它的定位、字体和revealtrans滤镜属性，同时调用Done函数

　　　改变滤镜显示样式，达到动态的目的，下面的三个层的设置内容与这个类似*//

　　<div id="div2"

　　style="position:absolute;top:20;left:140;width:100;height:100;

　　　　　 font-size: 100;text-align:center;background-color:blue;

　　　　　 filter:revealtrans(transition=2,duration=1.5)"

　　　　　 onfilterchange="done(2)">

　　<div id="div3"

　　style="position:absolute;top:20;left:260;width:100;height:100;

　　　　　 font- size:100;text-align:center;background-color:blue;

　　　　　filter:revealtrans(transition=3,duration=1.5)"

　　　　　 onfilterchange="done(3)">

　　<div id="div4"

　　 style="position:absolute;top:20;left:380;width:100;height:100;

　　　　　　font- size:100;text-align:center;background-color:blue;

　　　　　　filter:revealtrans(transition=4,duration=1.5)"

　　　　　　onfilterchange="done(4)">

　　</body>

　　好了，本节就介绍到这里，下一节将向您推荐一个倒计时的例子。

　17、倒计时

　　下面是一个有趣的例子，请。

　　当您点击显示的红色方块时，以一种随机的revealtrans滤镜样式进入数字倒计时，

当您刷新整个页面后，再点击红色方块时，又会以另一种revealtrans的滤镜样式进入倒计时。怎么样，是不是很有趣。这里应用了大量的script的函数，而在定义数字显示区域时，用了CSS定位的知识，代码如下：

　　<div id ="div1"

　　//*这里的div1是一个类选择符，在JavaScript的函数中调用*//

　　 style="position:absolute;top:20;left:20; width:100;height:100;

　　　　　　font-size:100;text-align:center; background-color:red;

　　　　　　filter:revealtrans(transition=23,duration=.01)"

　　　　　　//*定义了revealtrans滤镜属性，样式设为随机，变换时间设为.01*//

　　　　　　onclick="Count()"

　　　　　　//*鼠标点击事件，触发Count（）函数*//

　　　　　　onfilterchange="Repeat()">

　　　　　　//*滤镜转换事件，触发Repeat（）函数*//

　　</div>

　　当然，您还可以查看实例的源代码，看一看javascript的代码是如何编写的。

　　好了，这一节就介绍到这里，下一节将向您介绍一个动态刷新的例子。

　18、动态刷新

我们先来看下面这个例子：

R G B

点击例子中的带颜色的RGB三个字母，分别表示将刷新后的文字变成对应的红、绿、蓝、三色。这个例子的实现代码如下：

　　<html>

　　<head>

<!--

　　textarea{font:georgia}

　　input{font-size:15px"georgia";

　　background:yellow;color:purple;height:23px;}

　　p.graffiti1{font-family:arial;font-size:30px;color:black;}

　　p.graffiti2{font-family:arial;font-size:30px;color:white;}

　　p.textbox{font-family:georgia;font-size:26px;color:purple}

　　span{font-family:"wide latin";font-size:36px;}

　　--> </style>

<!--

　　function initialize(){

　　document.all.cmb1.innerText=traintext.value;

　　document.all.cmb2.innerText=traintext.value;}

　　function vandalize()

　　{var s=traintext.value; if (s.length>15)

　　{alert("please use 15 characters or less"); traintext.value="";}

　　else{document.all.cmb1.innerText=traintext.value;

　　document.all.cmb2.innerText=traintext.value;}}

　　//--> </script> </head>

　　<dd><input TYPE="TEXT" NAME="traintext" Value="请输入您要刷新的文字"

　　size="20">

　　<p><span STYLE="color:red;cursor:hand"

　　　　　　onclick="cmb2.style.color='#ff0000'">R</span>

　　　　<span style="color:lime;cursor:hand"

　　　　　　 onclick="cmb2.style.color='#00ff00'">G</span>

　　　　<span style="color:blue;cursor:hand"

　　　　　　 onclick="cmb2.style.color='#0000ff'">B</span></p></dd></p>

　　</html>

　　如果您看过了我们前面的讲解，理解这段代码并不难。您自己看一看吧，或者您动手试一试，今天就讲到这里了。

　　现在，CSS特效赏析的栏目就告一段落了，有关CSS的其他应用，我们会在以后推出的DHTML教程中再做讲解。对于教程本身，希望广大网友多提宝贵的意见，谢谢。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Mysql索引原理与优化

下一篇：Log4j使用指南

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

CSS特效赏析

CSS特效赏析

51CTO博客