| 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教程中再做讲解。对于教程本身,希望广大网友多提宝贵的意见,谢谢。 上一实例  谈谈您的看法 | |