|
|
CSS特效赏析
CSS特效赏析
1.动态改变样式
2.动态可视化效果
3.动态滤镜显示
4.Blentrans属性
5.Revealtrans属性
6.动态Glow属性
7.显示和隐藏
8.兼容两种浏览器
9.移动对象
10.对象的滑动
11.键盘控制对象
12.鼠标控制对象
13.Clip属性的应用
14.动态文字变换
15.动态改变页面样式
16.动态时钟控制
17.倒计时
18.动态刷新
|
|
CSS特效赏析
上一实例
18、动态刷新
我们先来看下面这个例子：
R G B
点击例子中的带颜色的RGB三个字母，分别表示将刷新后的文字变成对应的红、绿、蓝、三色。这个例子的实现代码如下：
<html>
<head>
<style TYPE="text/css">
<!--
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>
<script language="javascript">
<!--
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>
<body onload="initialize()">
<p class="textbox" align="center">
<dd><input TYPE="TEXT" NAME="traintext" Value="请输入您要刷新的文字"
size="20">
<input name="BTN1" TYPE="BUTTON" VALUE="刷新" onclick="vandalize()">
<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>
<p id="cmb1" CLASS="graffiti1" align="center"></p>
<p id="cmb2" CLASS="garffiti2" align="center"></p></body>
</html>
如果您看过了我们前面的讲解，理解这段代码并不难。您自己看一看吧，或者您动手试一试，今天就讲到这里了。
现在，CSS特效赏析的栏目就告一段落了，有关CSS的其他应用，我们会在以后推出的DHTML教程中再做讲解。对于教程本身，希望广大网友多提宝贵的意见，谢谢。
上一实例
|
|
|