当前位置： 电脑软硬件应用网 > 设计学院 > 图像处理 > 正文
谈谈对象的隐藏与显示
谈谈对象的隐藏与显示
2005-12-30 19:28:53　　文/45IT收集 　　出处:电脑软硬件应用网 　　


要想让您的站点更加吸引人，除了内容实用以外还需要加入一些动态的内容，让浏览你的站点的人感到趣味横生，对象的显示与隐藏就是常用的一个技巧。如果你学好了以前的DHTML课程的话，实现起来就很容易了。
　　假如我们有一个如下的 DIV tag： 

 <DIV ID="blockDiv" STYLE="position:absolute; left:200; top:100">
 <IMG SRC="xxx.jpg" WIDTH=xx HEIGHT=xx BORDER=0>
 </DIV>

　　DIV 的名字是任意起的.可以通过 JavaScript 脚本来控制它. 下面就是具体方法：

　　对 Netscape 来说， 得到 CSS-P 性质 (property) 的方法如下: 
　　　　document.blockDiv.propertyName
　　而对于 Internet Explore 来说， 要用 
　　　　blockDiv.style.propertyName
　　propertyName 可以是任何一个 DIV 可以用的 CSS－P 的性质, 比如 left, top, visibility, zindex, width。
　　以下就是整个脚本，试试吧：

<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
    }

    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"
    }
  //-->
  </SCRIPT>
</HEAD>

<BODY onLoad="init()">
<center>
  <A HREF="javascript:showObject(block)">显示 show</A> |
  <A HREF="javascript:hideObject(block)">隐蔽 hide</A>
</center>

  <DIV ID="blockDiv" 
       STYLE="position:absolute; left:150; top:150; width:200; visibility:visible;">
  <IMG SRC="baby.gif" BORDER=0 width=100 height=136>
  </DIV>

</BODY>
</HTML>


　　发挥你的想象力吧，利用以上脚本结合OnMouse鼠标感应特性，你一定可以做出非常精彩的页面特效。

务器租用、托管；域名注册；虚拟主机
江湖、聊天室租用；程序开发，网站建设
欢迎咨询http://nicchina.com/
QQ：30196310
  • 上一篇文章：

  • 下一篇文章：
    • 最新热点 最新推荐 相关文章
    设计理论:可用性设计的10个准则
    设计理论:质感高光基础入门 I
    平面设计中的常用字库种类说明
    关于色彩中“纯度”概念的讨论
    三维设计专用技术名词解释
    超酷黄金喜字
    Photoshop的动作命令和批处理命令
    轻松几步将美女照片处理为手工素描
    巧用Photoshop滤镜模拟水粉花卉效果
    打造照片朦胧梦幻效果
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号