欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 教程文档 > HTML > 教程六

教程六

2018-05-11 355 收藏 0 赞一个 0 真差劲 0 去评论

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

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

<html>
<head>
<title>DHtml举例17</title>
<style><!--  
body {font-size:9pt}  
.redtext {  
color:red;  
position:absolute;  
top:100;  
left:100;  
}  
.graytext {  
color:gray;  
position:absolute;  
top:101;  
left:102;  
}  
}  
-->
</style>
<scriptlanguage="JavaScript">
</script>
</head>
<body>
<p><br>
</p>
<divclass="graytext"><b>您最喜欢制作主页吗?</b></div>
<divclass="redtext"><b>您最喜欢制作主页吗?</b></div>
</body>
</html>

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

例18 文本在屏幕中移动

<html>
<head>
<title>DHtml举例18</title>
<style><!--  
body {font-size:9pt}  
.move {  
cursor:hand;  
position:absolute;  
visibility:hidden;  
height:60;  
width:60;  
color:yellow;  
border:blue 1px solid;  
background-color:rgb(147,0,0);  
}  
-->
</style>
<scriptlanguage="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";//隐藏对象stamp  
flag=1;  
}//if  
}//function  
function 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>
<bodyonclick="MoveStamp()">
<palign="center">用鼠标单击一下会有效果出现,再单击一下则效果消失,如此反复……</p>
<divid="stamp"class="move"><pvalign="middle"align="center"><br><b>我要在天空中飞翔<b></p></div>
</body>
</html>

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

返回主目录
暂无界面图片

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论