让网页靓起来 常见网页特效使用方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
让网页靓起来常见网页特效使用方法
[日期：12-20] 来源：作者：[字体：大中小]
怎么使用网页特效？
不少朋友经常问我，你站上的网页特效代码该怎么用？为什么我将代码插入到网页里没有效果呢？为什么我的特效没有图片？等等...其实对于大多数的网页特效用起来还是非常简单的，下面我简要的说一下普遍性的特效代码使用方法：
一、直接插入使用
对于大多数的网页特效都是可以直接插入到网页里使用的，举个例子：比如我想在我的网页里某个地方插入一个显示当前时间的效果，那么你可以在本站上搜索到时间的特效，比如我看到的代码如下：
以下是引用片段：
<html>
<head>
<title>网页特效|/Js|---日期+星期+时间</title>
</head><body>
<!--将以下代码加入HTML的<Body></Body>之间-->
<script language="JavaScript">
<!---
today=new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var timeValue = "<FONT COLOR=black>" + ((hours >12) ? hours -12 :hours); timeValue += ((minutes < 10) ? "<BLINK><FONT COLOR=black>:</FONT></BLINK>0" : "<BLINK><FONT COLOR=black>:<
/FONT></BLINK>") + minutes+"</FONT></FONT>";
timeValue += (hours >= 12) ? "<FONT COLOR=blue><I><B>pm</B></I></FONT>" : "<FONT COLO
R=blue><B><I>am</I></B></FONT>";
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray("<font color=RED>星期日","<font color=black>星期一","<font color=black>星期二","<font color=black>星期三","<font color=black>星期四","<font color=black>星期五","<font color=red>星期六"); document.write("<font color=black>",today.getYear(),"<font color=black>年
","<font color=black>",today.getMonth()+1,"<font color=black>月
","<font color=black>",today.getDate(),"<font color=black>
日 </FONT>",d[today.getDay()+1]," ",timeValue); //-->
</script>
</body></html>
上面是显示的一个当前日期时间星期的效果，在上面这些代码中最主要的就是<script language="JavaScr ipt">...</script> 这一段内容了，其他的都可以不管，所以我只要把<script language="JavaScript">...</scr ipt>这里面的代码复制到网页里相应的位置就可以了，这种情况是比较简单的。
二、含有图片的特效
有不少朋友问我为什么我的特效没有效果呢？也看不到图片！
我们还是举个例子来说吧，比如爬向鼠标的好多蚂蚁这个特效，首先我们可以确定这个特效是属于第一种类型的就是直接将<script language="JavaScript">...</script>里的代码插入网页中就可以直接使用的，但是为什么预览的时候看不到蚂蚁呢？？？我们知道那些蚂蚁实际上都是一些图片，然后程序上让这些图片运动而已，所以你看不到图片的原因是：你有没有把图片保存到自己的电脑上呢，我们从这个特效里的代码可以看到下面的一段代码：
以下是引用片段：
var dir = "images/";
var images = new Array(
dir+"antdl.gif",
dir+"antdn.gif",
dir+"antdr.gif",
dir+"antlt.gif",
dir+"antrt.gif",
dir+"antul.gif",
dir+"antup.gif",
dir+"antur.gif"
);
这段代码就是调用图片的路径和名称，首先是在images文件夹下的，下面就是用到的所有图片，你需要将这些图片都要下载到自己的电脑上。
怎么下载？比如我下载antdl.gif这个图片我可以直接在网页上另存
为，也可以这样[img]/JsCode/images/antdl.gif[/img] ，这里面的诀窍你自己体会吧。
把所有的图片下载到电脑上后我们就要设置好这个特效使用的图片的路径，比如你这个网页名字叫aa.ht
m 放在d:/web/myweb/aa.htm下面的，首先我们要在myweb这个文件夹下建立一个images文件夹，将那些图片都放在这里面，这时候你再预览肯定就有效果，当然你也可以建立一个img文件夹或其他的随便你，但是这时候代码里的var dir = "images/";这个就要随之修改，同理图片的名字你也可以自己随便定义，但是要保证代码里的图片跟实际路径里的图片名字对应。
三、需要定义样式的特效
这种情况在css效果里比较多，有好多朋友直接把body里的代码复制过去了，可是忘记了head里可能还有个style没有复制过去，这样预览的时候肯定没有效果的。
还是举例子，比如用CSS设计艺术字这个效果，我们可以看到下面这个代码段：
以下是引用片段：
<style type="text/css">
<!--
.title_1 { font-family: "Verdana"; font-size: 12px; color: #E1E4EC; width: 100%; filter: DropShadow(Col
or=#213C63, OffX=1, OffY=1)}
.text { font-family: "Verdana"; font-size: 12px; line-height: 16px; color: #666699; text-decoration: none} .unnamed1 { filter: DropShadow(Color=#FFFFFF, OffX=1, OffY=1)}
-->
</style>
这段代码按照标准写法应该放在<head></head>之间的，在这个特效中写的不够规范但是不影响浏览效果，<style></style>里面的内容就是定义了这个效果里所用到的样式，我们可以看到一些基本的文字大小颜色等等属性。
所以没有这个样式控制，是看不到效果的。
四、需要页面加载的特效
这种效果大家也经常遇到，很多时候大家调试来调试去就是没有效果，对照了所有的代码确定没有错误，可是还是看不到效果，怎么回事？可能就是你没有加载这个效果啦，什么意思？比如好多效果是代码已经
写好的函数放在页面里，这时候别人打开网页的时候，必须得加载这个函数才能启动这个效果。
我们还是举例子来说吧，看下面这个特效：
以下是引用片段：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效观止|[url]|[/url] --- 页面游动吐泡小鱼</title>
</head>
<body onLoad="Start()">
<script language="JavaScript">
<!--
Image0=new Image();
Image0.src="/Uploadfile/2006515152552219.GIF";
Amount=12;
Pics=new Array();
Load=new Array();
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Rate=new Array();
Grow=new Array();
Step=new Array();
Cstep=new Array();
NsSize=new Array();
Ns=(yers)?1:0;
Pos=-1;
Jog=1;
Timer=null;
for(i=0; i <= 6; i++){
Pics[i]="Images/0427"+i+".gif";
}
function PreLoad(){
for(i=0; i < Pics.length; i++){
Load[i]=new Image();
Load[i].src=../../Pics[i];
}
}
PreLoad();
Strt=0-(Load[0].width+50);
function AniFish(){
Pos+=Jog;
if (Pos >= Pics.length) Pos=0;
if (Ns) document.nfish.document.images.nframe.src=../../Pics[Pos];
else document.images.iframe.src=../../Pics[Pos];
Timer=setTimeout('AniFish()',50)
}
function MoveFish(){
H=(yers)?window.innerHeight+window.pageYOffset:window.document.body.clientHeight
+document.body.scrollTop;
W=(yers)?window.innerWidth+window.pageXOffset:window.document.body.clientWidth+
document.body.scrollLeft;
Strt-=2;
if (Strt < 0-(Load[0].width)) Strt=W;
if (Ns){document.nfish.left=Strt;document.nfish.top=H-(Load[0].height+10)}
else {ifish.style.left=Strt;ifish.style.top=H-(Load[0].height+10)}
setTimeout('MoveFish()',10)
}
H2=(yers)?window.innerHeight:window.document.body.clientHeight;
for (i=0; i < Amount; i++){
Ypos[i]=Math.random()*H2-50;
Xpos[i]=-50;
Speed[i]=Math.random()*10+1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
Grow[i]=4;
NsSize[i]=Math.random()*4+6;
Rate[i]=Math.random()*0.5+0.1;
}
if (Ns){
for (i = 0; i < Amount; i++){
document.write("<layer name='sn"+i+"' left=0 top=-50><img src="+Image0.src+" name='N' width="+N
sSize[i]+" height="+NsSize[i]+"></layer>");
}
document.write("<layer name='nfish' left=0 top=-50><img src='0.gif' name='nframe'></layer>");
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:-100px;left:0px;filter:alp
ha(opacity=90)">');
}
document.write('</div></div>');
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'
+'<img id="ifish" src="0.gif" name="iframe" style="position:absolute;top:-100px;left:0px"></div></div>')
;
}
function Bubbles(){
Hs=(yers)?window.pageYOffset:document.body.scrollTop; Ws=(yers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(270*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]*5);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] < -40){
if (Ns) {Ypos[i]=document.nfish.top;Xpos[i]=document.nfish.left}
else {Ypos[i]=ifish.style.pixelTop;Xpos[i]=ifish.style.pixelLeft}
Speed[i]= 6+Math.random()*3;
Grow[i]=4;
NsSize[i]=Math.random()*4+6;
}
if (Ns){
yers['sn'+i].left=Xpos[i]+Ws;
yers['sn'+i].top=Ypos[i]+Hs;
}
else{
si[i].style.pixelLeft=Xpos[i]+Ws;
si[i].style.pixelTop=Ypos[i]+Hs;
si[i].style.width=Grow[i];
si[i].style.height=Grow[i];
}
Grow[i]+=Rate[i];
Cstep[i]+=Step[i];
if (Grow[i] > 15) Grow[i]=16;
}
setTimeout('Bubbles()',10);
}
function Start(){
AniFish();
MoveFish();
Bubbles();
}
//-->
</script>
</body>
</html>。