|
|
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特效赏析
上一实例 下一实例
7、显示和隐藏
我们来看一下这个例子，点击图片下方的文字使图片显示/隐藏
显示-
show 隐藏- hide
我们来看一下这个例子的源代码：
<html>
<head>
<script language="JavaScript">
<!--
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>
<body onLoad="init()">
<a href="javascript:showObject(block)">显示-show</A>
<a href="javascript:hideObject(block)">隐蔽-hide</A>
//*两个超链接调用javascript中的两个函数*//
<div id="blockDiv" 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兼容的问题。我们将在下一节针对两种浏览器的兼容问题做详细讲
解。
上一实例 下一实例
|
|
