网页特效代码┊JsCode.CN
网页特效代码 您的位置:首页 > 网页制作教程 > HTML基础教程
RSS订阅

让网页靓起来 常见网页特效使用方法

[ 发布者:佚名┊来源:网络整理┊时间:2006-08-26┊浏览: 人次 ]

不少朋友经常问我,你站上的网页特效代码该怎么用?为什么我将代码插入到网页里没有效果呢?为什么我的特效没有图片?等等...其实对于大多数的网页特效用起来还是非常简单的,下面我简要的说一下普遍性的特效代码使用方法:

一、直接插入使用

对于大多数的网页特效都是可以直接插入到网页里使用的,举个例子:比如我想在我的网页里某个地方插入一个显示当前时间的效果,那么你可以在本站上搜索到时间的特效,比如我看到的代码如下:

<html>
<head>
<title>网页特效|Linkweb.cn/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 COLOR=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="JavaScript">...</script> 这一段内容了,其他的都可以不管,所以我只要把<script language="JavaScript">...</script>这里面的代码复制到网页里相应的位置就可以了,这种情况是比较简单的。

二、含有图片的特效

有不少朋友问我为什么我的特效没有效果呢?也看不到图片!

我们还是举个例子来说吧,比如 爬向鼠标的好多蚂蚁 这个特效,首先我们可以确定这个特效是属于第一种类型的就是直接将<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这个图片 我可以直接在网页上另存为,也可以这样http://www.jscode.cn/JsCode/images/antdl.gif ,这里面的诀窍你自己体会吧。把所有的图片下载到电脑上后我们就要设置好这个特效使用的图片的路径,比如你这个网页名字叫aa.htm 放在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(Color=#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>网页特效观止|www.jscode.cn| --- 页面游动吐泡小鱼</title>
</head>

<body onLoad="Start()">
<script language="JavaScript">
<!--
Image0=new Image();
Image0.src="http://www.jscode.cn/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=(document.layers)?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=(document.layers)?window.innerHeight+window.pageYOffset:window.document.body.clientHeight+document.body.scrollTop;
W=(document.layers)?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=(document.layers)?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="+NsSize[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:alpha(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=(document.layers)?window.pageYOffset:document.body.scrollTop;
Ws=(document.layers)?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){
document.layers['sn'+i].left=Xpos[i]+Ws;
document.layers['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>

这个效果大家应该看到过了吧没看过的点击:http://www.jscode.cn/JsHtml/Js690.htm 首先这个特效也是属于第一种情况直接将代码插入就可以使用的,同时他也用到了图片,按照第二种方法保存图片。可是仅仅完成这两步是不够的,仔细看这个代码我们会发现 body里多了一行代码<body onLoad="Start()"> ,你是否漏掉了onLoad="Start()"这个呢?说到这里就行了至于这个属性或函数怎么写的就不需要了,在这里我仅仅是提醒大家不要忘记这个地方。

五、需要调用第三方文件的特效

这种情况一般是用在比较复杂的效果中,比如 可控制的用FLASH控件实现的图片渐显JS效果 这个就需要一个外部文件,紧紧把所有代码复制过去是没用的。对于像类似的需要调用其它文件的我都会说明出来的或者直接提供外部文件的下载地址,他可能是个flash也可能是htm网页还有可能是是其它形式的函数库之类的,比如类似的还有在时间特效里我整理的几个弹出选择日期效果的特效。当然下载下来的文件也不是随便放的,具体的使用方法和图片是类似的,我们要找到代码中调用这个文件的地方,然后看看是直接放在根目录下还是需要放在某个文件夹下的。

上面我简要的说了一下特效的使用方法,紧紧是一些方法和小技巧,没什么技术上的东西,所以有些专业术语我都可能尽量的普通化一点,当然在做网页的时候我们还会遇到其它的一些问题,希望大家能举一反三,遇到不懂的在自己努力之后没有解决的可以利用搜索引擎也可以到本站来提问

by 在远方

本类相关信息
CSS字型的设定
 CSS2.0字型的设定.. 在总部网站中已有一些<font>..</font>...
五彩缤纷建网页(3)色彩的象征
也要考虑色彩的象征意义。颜色得配置,可以流露你的心情和喜好,也会暴露你...
文字布局(TEXT STYLE)标记(TAGS)
行的控制 段(Paragraph) (可以看作是空行) <p>你好吗?<p>很...
背景图的详细设定
原本<body>卷标提供了以下几种设定: <body alink=colorvalue ba...
CopyRight © 2005-2008 JsCode.CN All Rights Reserved
网页特效代码┊JsCode v3.0 Designed By 在远方
说明:本站提供最新精选的免费网页特效代码,包括网页背景特效,网页文字特效,网页图片特效,导航菜单特效代码等20多种常用网页特效代码下载,以及Flash特效,网页模版,字体大全,字体下载等网页制作特效素材资源。网页特效代码欢迎您的光临!