Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Html教程

自学动态HTML---教程三

文章来源:中国石油大学

相信您已经对JavaScript有所掌握,现在我们用一些小技巧把文本给隐藏起来或将隐藏的文本给显示出来,您一定会喜欢这些小技巧的。这次我们用一个新的style属性--display,它的值可以是""(或null)和"none"。请看例9。

例9 隐藏和显示文本
<html>
<head>
<title>DHtml举例9</title>
<style><!--
body {font-family:"宋体";font-size:9pt}
.gray {color:gray}
.blue {color:blue}
-->
</style>
<script language="JavaScript">
function change() {
if(Ques.style.display == "none")
{
Answ.style.display = "none";
Ques.style.display = "";
}
else
{
Answ.style.display = "";
Ques.style.display = "none";
}
}

document.onclick=change;
</script>
<body>
<ul>
<li id="Ques" class="gray" style="display:''">请您点击,OK?
<li id="Answ" class="blue" style="display:'none'">哈哈,我变了,请您再点击。
</ul>
</body>
</html>

此例中,文本将在您点击以后改变颜色和内容,奇妙吧。display=""或"null"是显示文本,而display="none"时是显示文本,上边的代码对您来说应该多能读懂,我就不多作解释了。今后的教程中我可能会讲解得比较少或者讲解得不太详细,大部分是用例子种的注释语句来说明,在此请读者多多谅解。下面的例子能产生闪烁滚动和颜色变换效果。

例11 闪烁滚动和颜色变换效果
<html>
<head>
<title>DHtml举例10</title>
<style><!--
body {font-family:"宋体";font-size:9pt}
.blue {color:blue}
.red {color:red}
-->
</style>
<script language="JavaScript">
var flag=0; //定义变量flag,

function disappear() {
var dx=window.event.srcElement;//定义变量dx为对象window.event.srcElement
var i,j; //定义循环变量

for(i=0;i<=1000;i++){for(j=0;j<=200;j++);}//利用循环来延长执行的时间,读者可以通过改变1000和200这两个数字来调节变化速度
dx.style.display = "none";

}//function

function appear() {
var dx=window.event.srcElement;//定义变量dx为对象window.event.srcElement
var i,j; //定义循环变量

for(i=0;i<=1000;i++){for(j=0;j<=200;j++);}//利用循环来延长执行的时间
dx.style.display = "";

if(flag==1) //利用变量flag来改变显示文本的样式类
{ flag=0;
dx.className="red";}
else
{ flag=1;
dx.className="blue";}//if

}//function

</script>
<body>
<p>请您在以下各行之间移动鼠标……</p>
<br>
<ul>
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">AC 米 兰
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">国 际 米 兰
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">尤 文 图 斯
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">佛 罗 伦 萨
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">桑 普 多 利 亚
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">拉 齐 奥
</ul>
</body>
</html>

 此例的效果请看下边:

请您在以下各行之间移动鼠标……

  • AC 米 兰
  • 国 际 米 兰
  • 尤 文 图 斯
  • 佛 罗 伦 萨
  • 桑 普 多 利 亚
  • 拉 齐 奥

下边我为您举了一个我比较常用的设计网页的方法。重点在于定义表格和链结的样式,并使用表格来控制文本输出。

例11 网页中常用的动态链结设计
<html>
<head>
<title>DHtml举例11</title>
<style><!--
table {font-family:"宋体";font-size:9pt}
a:link {color:white;text-decoration:none}
a:visited {color:white;text-decoration:none}
a:hover {color:yellow;text-decoration:underline}
-->
</style>
</head>

<body>
<table border="0" width="18%" bgcolor="#930000" cellspacing="6">
<tr>
<td width="100%"><a href="http://www.bianceng.cn/Programming/">编程语言</a></td>
</tr>
<tr>
<td width="100%"><a href="http://www.bianceng.cn/webkf/">web开发</a></td>
</tr>
<tr>
<td width="100%"><a href="http://www.bianceng.cn/database/">数据库</a></td>
</tr>
<tr>
<td width="100%"><a href="http://club.bianceng.cn">学编程论坛</a></td>
</tr>
</table>
</body>
</html>

a:link是定义链结部分(即语句<a href="……">……</a>)有链结时的文本样式;a:visited是定义访问过的链结部分的文本样式;a:hover是定义鼠标移到链结部分上边时文本的样式。千万要记住这三个有关链结的样式定义的定义顺序,否则将得不到想要的效果。

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有