Dhtml网页实例教程（10）

来源：动态WEB脚本技术论坛时间：2007-10-09 13:39:00　

Dhtml实例教程（十一）

今天我们开始使用图像了。图像在网页制作重视非常重要的一部分，如果没有图像，网页将变得很单调乏味。我们这里并不是单纯地用<img src="……" alt="……">Html标志在网页中嵌入图像，而是要使图像具有动态性。例15是一个比较简单的例子，关键是改变<img src="……" alt="……">Html标志中的src属性。

例15 动态改变图像

<html>
<head>
<title>DHtml举例15</title>
</head>
<body>
<p><br>
<font style="font-size:9pt" color="blue">在下边图形上移动鼠标可以改变图象</font>
</p>
<img style="cursor:hand" onmouseover="this.src=’boom2.gif’" onmouseout="this.src=’boom1.gif’" src="boom1.gif">
</body>
</html>

（注意:此例中的图像文件保存在与该HTML文档相同的目录下,因为HTML可以使用相对目录,所以src属性后边直接跟图像的文件名）

下边我们结合上一个教程中使用过的innerHTML属性和insertAdjacentHTML方法来动态改变页面。例16是一道选择题，当您选择正确时会显示“笑脸”图像，而当您选择错误时将会显示“愁眉苦脸”图像。

例16 一道动态的选择题

<html><head><title>DHtml举例16</title><style></style><script language="JavaScript">function ImgAppear(imgfile){//此函数用于显示图像if(imgfile=="good.gif"){Img.innerHTML=""; //清空Img对象中的所有HtmlImg.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答对了!"); //在对象Img中插入图像的Html标志}else{Img.innerHTML="";Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答错了!");}}//functionfunction Start(){//此函数用于“重新开始”的操作Img.innerHTML="";}//function</script></head><body><p><br><font color="gray">98-99赛季欧洲冠军杯得主是哪支球队（请用鼠标点击选择项）：</font> </p><table width="100％"><tr><td width="233"><ul class="none"><li onmouseover="this.className='underline'" onmouseout="this.className='none'"onclick="ImgAppear('bad.gif')">多特蒙德队 </li><li onmouseover="this.className='underline'" onmouseout="this.className='none'"onclick="ImgAppear('bad.gif')">尤文图斯队 </li><li onmouseover="this.className='underline'" onmouseout="this.className='none'"onclick="ImgAppear('good.gif')">曼彻斯特联队 </li><li onmouseover="this.className='underline'" onmouseout="this.className='none'"onclick="ImgAppear('bad.gif')">皇家马德里队 </li><li onmouseover="this.className='underline'" onmouseout="this.className='none'"onclick="ImgAppear('bad.gif')">巴塞罗那队 </li><li onmouseover="this.className='underline'" onmouseout="this.className='none'"onclick="Start()"><font color="gray">重新开始 </font></li></ul></td><td width="520" id="Img"></td></tr></table></body></html>

Dhtml实例教程（十二）

对于Html的<div></div>标志对，您可能使用的甚少，当它在动态Html的设计中却非常有用，我们可以用它的样式属性中的position属性来定义文本显示位置的方式，包括相对位置（position:"relative"）和绝对位置（position:"absolute"），然后在用样式属性中的top、left、heigh、width属性我们先来确定文本显示的位置。很多书上把对<div></div>标志对的控制叫做对“层”的控制。下面是一个简单的举例。

例17 重叠两行文本而得到的阴影效果

<html>
<head>
<title>DHtml举例17</title>
<style>

</style>
</head>
<body>
<p><br>
</p>
<div class="graytext"><b>您最喜欢制作主页吗？</b></div>
<div class="redtext"><b>您最喜欢制作主页吗？</b></div>
</body>
</html>

和以前的教程中介绍的其它样式单的属性相似，我们同样可以用JavaScript来对<div></div>标志对中的文本进行动态控制。下面的例子将使文本在屏幕上移动。

例18 文本在屏幕中移动
<html><head><title>DHtml举例18</title><style></style><script language="JavaScript">var all=document.all;var flag=1;//变量flag用来控制“执行或终止执行函数Move()”var act;var xhd=0;//变量xhd为信号灯，用于控制“层”的移动方向function MoveStamp(){all.stamp.style.top=document.body.offsetTop;//对象stamp的top属性等于对象body的offsetTop值all.stamp.style.left=document.body.offsetLeft;all.stamp.style.visibility = "visible";if(flag==1){act = window.setInterval("Move()",50);//执行函数Move()flag=0;}else{window.clearInterval(act);//终止执行函数Move()all.stamp.style.visibility = "hidden";//隐藏对象stampflag=1;}//if}//functionfunction Move(){if(all.stamp.style.pixelLeft>=document.body.offsetLeft+350) xhd=1;if(all.stamp.style.pixelLeft<=document.body.offsetLeft) xhd=0;if(xhd==0){//对象stamp往右下方移动all.stamp.style.pixelLeft+=5;all.stamp.style.pixelTop+=5;}else{//对象stamp往左上方移动all.stamp.style.pixelLeft-=5;all.stamp.style.pixelTop-=5;}//if}//function</script></head><body onclick="MoveStamp()"><p align="center">用鼠标单击一下会有效果出现，再单击一下则效果消失，如此反复……</p><div id="stamp" class="move"><p valign="middle" align="center"><br><b>我要在天空中飞翔<b></p></div></body></html>

语句act = window.setInterval("Move()",50)调用了JavaScript本身具有的函数，它用于在间隔特定时间后（本例中为50毫秒）执行特定的函数（本例中为Move()函数），然后将返回值赋给一个变量（本例中为变量act），要想终止此特定函数的执行，用语句window.clearInterval(act)即可。此例是一个很不错的例子，希望您能仔细阅读，以便以后编写 * 页时能够得心应手。

第一页上一页 7 8 9

11 下一页

标签：html,dhtml,教程

投稿

Dhtml网页实例教程（10）

猜你喜欢

python将二维数组升为一维数组或二维降为一维方法实例

对django xadmin自定义菜单的实例详解

Python学习之基础语法介绍

基于Python编写一个刷题练习系统

Django serializer优化类视图的实现示例

numpy和tensorflow中的各种乘法(点乘和矩阵乘)

python在不同层级目录import模块的方法

将Django框架和遗留的Web应用集成的方法

详解Python:面向对象编程

sql中的 IF 条件语句的用法详解

python实现简单银行管理系统

SQL Server AlwaysOn读写分离配置图文教程

详解Python的Django框架中的通用视图

提一个懒人需求——找遥控器的电视

Javascript 获取css属性

SQLSERVER数据库中的5173错误解决方法

撤回我也能看到!教你用Python制作微信防撤回脚本

Win7彻底卸载Oracle 11g图文步骤(靠谱)

python virtualenv虚拟环境配置与使用教程详解

网站设计配色方案教程