CSS特效赏析

　1.动态改变样式
　2.动态可视化效果
　3.动态滤镜显示
　4.Blentrans属性
　5.Revealtrans属性
　6.动态Glow属性
　7.显示和隐藏
　8.兼容两种浏览器
　9.移动对象
　10.对象的滑动
　11.键盘控制对象
　12.鼠标控制对象
　13.Clip属性的应用
　14.动态文字变换
　15.动态改变页面样式
　16.动态时钟控制
　17.倒计时 　
　18.动态刷新

CSS特效赏析

　上一实例　下一实例   

　　15、动态改变页面样式

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

　　通过点击表格中对应的部分，是表格上方的时钟样式发生了相应的改变。
　　其实，这种效果的实现很简单，那个时钟是用JavaScript实现的。而下面的这个表格的实现代码是这样的：

　　<p id="Clock" align="center"></p>
　　//*引入时钟*//
　　<table border="1" align="center">
　　<tr> <td class="p2">时钟颜色</td>
　　　　 <td class="p2">时钟背景</td>
　　　　 <td class="p2">时钟字体</td>
　　　　 <td class="p2">字体尺寸</td>
　　<td class="p2">字体粗细</td> </tr>
　　<tr> <td colspan="5" height="3"> </td> </tr>
　　<tr> <td class="p2">
　　<span onmouseover="this.style.cursor='hand'"
　　　　　onmouseout="this.style.cursor=default"
　　　　　onclick="Clock.style.color='purple'">紫色</span>
　　</td>
　　//*设置鼠标事件，鼠标放上、离开、点击时的状态*//
　　<td class="p2">
　　<span onmouseover="this.style.cursor='hand'"
　　　　　onmouseout="this.style.cursor=default"
　　　　　onclick="Clock.style.background='red'">红色</span>
　　</td>
　　……
　　//*省略号代表的代码和“紫色”、“红色”的定义是类似的*//

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

上一实例　下一实例

谈谈您的看法