请按ctrl+D把本页加入收藏夹
>> 网站建设 >> 您的位置    
文章内容
07-05-28 01:19:39

Web中实现类似windowsXP中退出的效果-建站心得-

       
 


>>Web中实现类似windowsXP中退出的效果<< 就是屏幕变黑啦。这个效果是浏览ztbbs的时候发现的,感觉好cool哦,于是找到了代码并且看了一下。主要的技术关键在于对css滤镜的掌握。还有就是基本的javascript的document对象。先大概了解一下document对象在Navigator浏览器中,document文档对象是核心是,同时也是最重要的。见下表:Links   Anchor  Form   Method  Prop链接对象  锚对象 窗体对象  方法   对象document对象的主要作用就是把这些基本的元素(如links,anchor等)包装起来,提供给编程人员使用。从另一个角度看,document对象中又是由属性和方法组成。1、document中三个主要的对象  在document中主要有:links,anchor,form等三个最重要的对象:(1)anchor锚对象:  anchor对象指的是<A Name=...> </A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。(2)链接links对象  link对象指的是用<A Href=...> </A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。(3)窗体(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[]。其效果是一致。 2、文档对象中的attribute属性  document对象中的attribute属性,主要用于在引用Href标识时,控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下:(1)链接颜色:alinkcolor  这个元素主要用于,当选取一个链接时,链接对象本身的颜色就按alinkcolo r指定改变。(2)链接颜色:linkcolor  当用户使用<A Href=...> Text string </A>链接后,Textstring的颜色就会按Linkcolor所指定的颜色更新。(3)浏览过后的颜色:VlinkColor  该属性表示的是已被浏览存储为已浏览过的链接颜色。(4)背景颜色:bgcolor  该元素包含文档背景的颜色。(5)前景颜色:Fgcolor  该元素包含HTML文档中文本的前景颜色。 3、文档对象的基本元素(1)窗体属性:  窗体属性是与HTML文档中<Form>...</Form>相对应的一组对象在HTML文档所创建的窗体数,由length指定。通过document.forms.length反映该文档中所创建的窗体数目。(2)锚属性:anchors  该属性中,包含了HTML文档的所有<A> </A>标记为Name=...的语句标识。所有“锚”的数目保存在document.anchors.length中。(3)链接属性: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"><!--tips = new Array(6);tips[0]="每日一语(1)";tips[1]="每日一语(2)";tips[2]="每日一语(3)";tips[3]="每日一语(4)";tips[4]="每日一语(5)";tips[5]="每日一语(6)";index = Math.floor(Math.random() * tips.length);document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");</Script></HEAD></BODY></HTML>css主要使用Gradient滤镜 这个我也不是很了解。有明白的给提供点有用的资料吧javascript代码是这样的<script type="text/javascript"><!--function log_out_filter(){ fLogOut = document.getElementsByTagName("html"); fLogOut[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; if (confirm('你确定将退出吗?')) {  return true; } else {  fLogOut[0].style.filter = "";  return false; }}//--></script>在html中这样使用 用一个链接 <a href="http://www.enwell.net" OnClick = "return Log_out_filter">Logout</a>

 
 
   
 

 
 
便民工具箱
 
最新文章