利用JAVASCRIPT实现网页动态效果

山西 李贞

利用JAVASCRIPT实现网页动态效果

山西 李贞

要想使网页设计得与众不同，添加一些实用的网页特效很有必要。本文结合实例详细地介绍了如何利用javascript来制作网页特效实现一些动态效果。

Javascript；网页设计；动态特效

当今是个互联网高速发展的网络时代，在网上要建立一个主页是很容易的，但要使自己的主页拥有一定的访问量却比较困难，当然各种形式的网站推广工作是必要的，而最关键的却在于你的主页是不是能吸引住浏览者，要想使网页做得与众不同，添加一些精彩的网页特效则很有必要了。所谓的网页特效就是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术，简而言之就是用网页脚本语言来编写制作动态的一些特殊的显示效果。

Javascript就是这样一种网页脚本语言，它用于开发基于客户端和服务器的Internet应用程序，旨在使网页开发人员能对网页的功能进行管理和控制。Javascript代码可以嵌入到HTML文档中，控制页面的内容和验证用户输入的数据。当页面显示在浏览器中时，浏览器将解释并执行Javascript语句。Javascript的功能十分强大，可以实现多种任务，如执行计算、检查表单、编写游戏、添加特效、创建安全密码等等，所有这些功能都有助于增强站点的动态效果和交互性，其中，利用Javascript在网页中添加特效的应用已经非常广泛了，利用它可以做出很多很精彩的动态效果。下面通过两个实例来详细介绍：

一、用Javascrip t实现网页的弹出信息窗口

在网上冲浪时有时会发现有一些网页在打开或关闭的时候，会弹出一个较小的窗口，里面通常会显示一些类似问候语或宣传标语等的信息。如果想要实现这样的效果，只需在该网页代码的〈body〉标签后面插入下面的代码就可以了：

〈script language=“javascript”〉

window.open(‘url’,‘窗口名称’,‘属性列表’);

〈/script〉

第二行中的“url”是要在窗口中显示的网页的来源，也就是网页的地址；“窗口名称”的起名要用非中文；“属性列表”中可以是各个属性值（外观与状态），中间用逗号分开。其中经常会用到的属性有：

toolbar（是否显示工具栏）、location（是否显示地址栏）、directories（是否显示常用链接）、status（是否显示状态栏）、menubar（是否显示选单条）、scrollbars（是否使用滚动条）、resizable（是否可改变大小），以上的属性值如果为1代表的是true，为0或列表中没有此属性代表的是false。还有一些属性是对弹出信息窗口的大小和位置进行控制的，如：width、height、top、left。

如果要在网页中制作一个弹出信息窗口，显示的是网页tcxxck.htm的内容，其属性如下：高200像素、宽200像素、有地址栏、有滚动条、不可改变大小，只需改第二行代码为：“window.open(‘tcxxck.htm’,‘w1’,‘height=200,width=200,location=1,scrollbars=1,resizable=0’);”。

二、用Javascrip t实现字幕连续滚动的效果

在网页制作中控制元素的滚动要用到一个标签------Marquee。添加上Marquee标签制作好的滚动元素，在一般情况下滚动完一次后，会出现一片空白的地方，也就是看起来不是连续的滚动效果。那么怎样才能制作出毫不间断、连续滚动的字幕效果呢？想要实现连续滚动，就必须将要滚动的字幕内容一遍一遍地进行复制，直到复制后的内容高度超出滚动区域的高度的两倍，接着再隐藏掉溢出的滚动条，用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下面的时候，再调整滚动条，将它向上滚动到和当前一样的位置，在浏览器当中预览时我们就会看到连续的字幕滚动了。下面看看是如何逐步实现的：

＜div id="marquees"＞＜!--这里是滚动区中的字幕的内容，可以任意定义--＞

＜a href="#"＞ 链接＜/a＞

＜br＞＜!--字幕内容结束--＞

＜/div＞

＜!--以下是java-script代码--＞

＜script language="java-script"＞

marqueesHeight=200;//滚动区的高度

stopscroll=false;//这个变量控制是否停止滚动

with(marquees){

noWrap=true;//

style.width=0;//宽度设为0

style.height=marqueesHeight;

style.overflowY="hidden";//滚动条不可见

onmouseover=new Function("stopscroll=true");//鼠标经过，停止滚动

onmouseout=new Function("stopscroll=false");//鼠标离开，开始滚动

}

//这时候的滚动区的高度已经看不出来了。一会将字幕的内容复制到下面输出的一个不可见的层"templayer"里面：

document.write('＜div id="templayer"

style="position:absolute;z-index:1;visibility:hidden"＞＜/div＞');

function init(){//初始化滚动内容

//将字幕内容多次进行复制到"templayer"，直到复制后的内容高度超出滚动区域的高度：

while(templayer.offsetHeight＜marqueesHeight){

templayer.innerHTML+=marquees.innerHTML;

}//把"templayer"的内容的“两倍”复制回原内容区：

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

setInterval("scrollUp()",10);

}

document.body.onload=init;

preTop=0;//此变量是用来确定滚动条是否不能再滚动

function scrollUp(){//滚动条的驱动函数

if(stopscroll==true)return;//如果变量"stopscroll"为真，则停止滚动

preTop=marquees.scrollTop;//

marquees.scrollTop+=1;//滚动条向下移动一个像素

//当滚动条不能再滚动了，则向上滚动到和当前一样的位置

//当然不仅如此，同样还要向下滚动一个像素(+1)：

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;

}

}

＜/script＞

以上的实例中可根据需要的具体情况自行调整相应的语句和相关的属性，从而做出不同的特效。利用Javascript可以制作出的网页特效还有很多，比如实现网页背景色的变幻、页面百叶窗切换、文字的打印效果、动态的鼠标指针等等，但是要注意一个原则，那就是网页的实用性和可行性，网页是艺术与技术相结合的产物，不要一味的添加很多不必要的特效，这样页面不仅会很乱，而且容易使浏览者产生厌烦情绪。总之，有效地利用Javascript实现网页特效，使你制作出的网页“动”静结合，“变”化莫测。

[1]刘瑞新，张兵义，冯柯编著.网页设计与制作教程.机械工业出版社，2005.

[2]姜玉洁，张楠，戴毅君等编著.网页制作教程.机械工业出版社，2007.2.

（编辑 王旸）

(作者单位：晋中职业技术学院信息技术系)