|
|
|
[
来路：21kn.com 时间：2007-7-7 17:07:08
点击： ] |
|
|
|
|
|
如果您已经熟悉了HTML代码和javascipt，又可以使用可视化的网页制作工具制作网页，那我就再来教您一点技巧。
把JavaScript的脚本包括在HTML中
把JavaScript的脚本包括在HTML中，使它成为HTML文档的一部分。这样javascript与HTML标识相结合，可以构造出功能强大的动态网页。
直接将JavaScript脚本加入文档的方法：
<Script Language ="JavaScript">
JavaScript语言代码；
JavaScript 语言代码;
....
</Script>
但是这种程序多了，加上HTML标记代码，你的源文件看上去就会十分庞大，使HTML文档可读性不强。
从html代码中分离出js文件
这时把<scirpt>和</script>之间的代码分离出来，存成一个.js文件就易于管理了。
举例：
我们利用这种思路来看一下目前大多数网站上的漂浮物广告的管理。
一般情况下，网页制作人员都是利用Dreamweaver或者其他可视化的网页制作工具完成这项工作。但无论如何最终这些可视化的工具都会将一段javascirpt放在<head>和</head>之间。然后你还需要在<body>中处理onload 事件。 我们不用这种方法，请将下面这段代码copy到你的记事本里，然后选择文件->另存为，在输入框中键入"mover.js"（引号不能少，以便保证你存储的文件的括展名是.js）
/***
****作者:你的大名
****时间:写上更新的时间
*/
<!--// Begin
var ie4up=(document.all) ? 1 : 0;
var ns4up=(document.layers) ? 1 : 0; // 判断是Netscpe4浏览器还是IE4浏览器或者以后版本
var imgAmount=1; // 漂浮物的数量，一般是1个。除非你想让你的页面下雪或者天兵下降(飞行员跳伞)
var moveSpeed=80; // moveSpeed值与漂浮物的移动速度成反比，越大，移动速度越快。反之，越慢
var imageSource="http://images.163.com/images/logo/intel0424.gif"; //图片的路径
var url="http://it.163.com/ " // 连接地址(红色部分为广告更新时需要变动的地方)
var dx, xp, yp;
var am, stx, sty;
var i, docWidth=400, docHeight=600;
if(ns4up){
docWidth=self.innerWidth;
docHeight=self.innerHeight;
}else if(ie4up){
docWidth=document.body.clientWidth;
docHeight=document.body.clientHeight;
}
dx=new Array();
xp=new Array();
yp=new Array();
am=new Array();
stx=new Array();
sty=new Array();
for(i=0;i< imgAmount; ++i){
dx[i]=0;
xp[i]=Math.random()*(docWidth-50);
yp[i]=Math.random()*docHeight;
am[i]=Math.random()*20;
stx[i]=0.02+Math.random()/10;
sty[i]=0.7+Math.random();
if(ns4up){
if(i==0){ //NS下只漂一个图片
document.write("<html><title></title><body>");
document.write("<layer name=\"inTheAir"+i+"\" left=\"30\" ");
document.write("top=\"30\" visibility=\"show\"><A href=\""+url+"\" target=\"_blank\"><img src=\"");
document.write(imageSource+"\" border=\"0\"></layer>");
document.write("</body></html>");
}else{
document.write("<html><title></title><body>");
document.write("<layer name=\"inTheAir"+i+"\" left=\"30\" ");
document.write("top=\"30\" visibility=\"show\"><A href=\""+url+"\" target=\"_blank\"><img src=\"");
document.write(imageSource+"\" border=\"0\"></layer>");
document.write("</body></html>");
}
}else if(ie4up){
if(i==0){ //IE下只漂一个图片
document.write("<html><title></title><body>");
document.write("<div id=\"inTheAir"+i+"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+i+"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><a href=\""+url+"\" target=\"_blank\"><img src=\"");
document.write(imageSource+"\" border=\"0\"></div>");
document.write("</body></html>");
}else{
document.write("<html><title></title><body>");
document.write("<div id=\"inTheAir"+i+"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+i+"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><a href=\""+url+"\" target=\"_blank\"><img src=\"");
document.write(imageSource+"\" border=\"0\"></div>");
document.write("</body></html>");
}
}
}
function moveOnNs(){ //在NS下调用此函数
for(i=0;i< imgAmount; ++ i){ // iterate for every inTheAir
yp[i] += sty[i];
if(yp[i] > docHeight-50){
xp[i]=Math.random()*(docWidth-am[i]-30);
yp[i]=0;
stx[i]=0.02+Math.random()/10;
sty[i]=0.7+Math.random();
docWidth=self.innerWidth;
docHeight=self.innerHeight;
}
dx[i] += stx[i];
document.layers["inTheAir"+i].top=yp[i];
document.layers["inTheAir"+i].left=xp[i]+am[i]*Math.sin(dx[i]);
}
setTimeout("moveOnNs()", moveSpeed);
}
function moveOnIE(){ //在IE下调用此函数
for(i=0;i< imgAmount; ++ i){ // iterate for every inTheAir
yp[i] += sty[i];
if(yp[i] > docHeight-50){
xp[i]=Math.random()*(docWidth-am[i]-30);
yp[i]=0;
stx[i]=0.02+Math.random()/10;
sty[i]=0.7+Math.random();
docWidth=document.body.clientWidth;
docHeight=document.body.clientHeight;
}
dx[i] += stx[i];
document.all["inTheAir"+i].style.pixelTop=yp[i];
document.all["inTheAir"+i].style.pixelLeft=xp[i]+am[i]*Math.sin(dx[i]);
}
setTimeout("moveOnIE()", moveSpeed);
}
if(ns4up){
moveOnNs();
}else if(ie4up){
moveOnIE();
}
// End -->
然后在你页面的<head>和</head>之间加入<script language="javascript" src="foo/mover.js"></script>，就可以调用这个js文件了。
如果销售部通知更新这个漂浮广告，你可以让他们自己做这项工作。告诉他只需打开这个.js文件换一下图片的连接和图片的指向就可以了，无需变动你的网页，这样你能节省不少时间。
使用js文件的好处还体现在更新整个网站中某一固定内容的时候，例如网站的copy right部分，如果你网站的所有页面都有这部分内容，你就可以把这部分代码存成一个copyright.js文件。待老板发话更新这部分内容时，你只需更改这个文件，整个网站所有页面的copy right就全部更新了。 |
|
|
：：：：站长友情提示：多花一分钟学点什么都好：：：：
|
|
|
|
|
|
|
|
|
|
|
|
=
= 免责声明 = = |
|
①
欢迎转载我网所刊信息，请注明“来源：E天下网络”。
② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。
※联系方式：Airtofly@163.com |
|
|
|
|
|
|
