Web中实现类似windowsXP中退出的效果

isiqi

浏览: 16496808 次
性别:
来自: 济南

最近访客更多访客>>

nison

hellohank

wangyy

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-07 ( 335)
2012-06 ( 252)
2012-05 ( 362)
更多存档...

Web JavaScript 浏览器 HTML CSS

就是屏幕变黑啦。这个效果是浏览ztbbs的时候发现的，感觉好cool哦，于是找到了代码并且看了一下。主要的技术关键在于对css滤镜的掌握。还有就是基本的javascript的document对象。
先大概了解一下document对象
在Navigator浏览器中，document文档对象是核心是，同时也是最重要的。见下表：
Links　　　Anchor　　Form　　　Method　　Prop
链接对象　　锚对象　窗体对象　　方法　　　对象
document对象的主要作用就是把这些基本的元素（如links,anchor等）包装起来，提供给编程人员使用。从另一个角度看，document对象中又是由属性和方法组成。１、document中三个主要的对象
　　在document中主要有：links,anchor,form等三个最重要的对象：
（１）anchor锚对象：
　　anchor对象指的是<A Name=...> </A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。
（２）链接links对象
　　link对象指的是用<A Href=...> </A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。
（３）窗体（Form）对象
　　窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document. Forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。
　　例:下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。
<Html><head></head>
<body>
<form >
<input type=text onChange="document.my.elements[0].value=this.value;" >
</form>
<form NAME="my">
<input type=text onChange="document.forms[0].elements[0].value=this.value;">
</form>
</body></html>
　　其中用了OnChnge事件(当窗体内容改变时激发)。第一个使用窗体名字标识my,第二个使用窗体数组Forms[]。其效果是一致。

２、文档对象中的attribute属性
　　document对象中的attribute属性，主要用于在引用Href标识时，控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下：
（１）链接颜色：alinkcolor
　　这个元素主要用于，当选取一个链接时，链接对象本身的颜色就按alinkcolo r指定改变。
（２）链接颜色：linkcolor
　　当用户使用<A Href=...> Text string </A>链接后，Textstring的颜色就会按Linkcolor所指定的颜色更新。
（３）浏览过后的颜色：VlinkColor
　　该属性表示的是已被浏览存储为已浏览过的链接颜色。
（４）背景颜色：bgcolor
　　该元素包含文档背景的颜色。
（５）前景颜色：Fgcolor
　　该元素包含HTML文档中文本的前景颜色。

３、文档对象的基本元素
（１）窗体属性：
　　窗体属性是与HTML文档中<Form>...</Form>相对应的一组对象在HTML文档所创建的窗体数，由length指定。通过document.forms.length反映该文档中所创建的窗体数目。
（２）锚属性：anchors
　　该属性中，包含了HTML文档的所有<A> </A>标记为Name=...的语句标识。所有“锚”的数目保存在document.anchors.length中。
（３）链接属性：links
　　链接属性是指在文档中<A>...</A>的由Href=...指定的数目，其链接数目保存在document.links.length中。

三、范例

例1:下面我们通过一个例子来说明文档对象的综合应用。输出结果见图6-2所示。
<html><head>
</HEAD>
<BOdy>
<Form Name="mytable">
请输入数据：
<Input Type="text" Name="text1" Value="">
</Form>
<A name="Link1" href="test31.htm">链接到第一个文本</a><br>
<A name="Link2" href="test32.htm">链接到第二个文本</a><br>
<A name="Link2" href="test33.htm">链接到第三个文本</a><br>
<A href="#Link1">第一锚点</a>
<A href="#Link2">第二锚点</a>
<A Href="#Link3">第三锚点</a>
<BR>
<Script Language="JavaScript">
document.write("文档有"+document.links.length+"个链接"+"<br>");
document.write("文档有"+document.anchors.length+"个锚点"+"<br>");
document.write("文档有"+document.forms.length+"个窗体");
</script>
</body>
</HTML>

例子2：下列程序随机产生每日一语。
<HTML>
<HEAD>
<script Language="JavaScript">

</script>

在html中这样使用用一个链接 <a href="http://www.enwell.net" OnClick = "return Log_out_filter">Logout</a>