| 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兼容的问题。我们将在下一节针对两种浏览器的兼容问题做详细讲 解。 上一实例 下一实例  谈谈您的看法 | |