网页特效代码该怎么用?
文章ID:31553作者: 友情发表日期: 2006-11-27 19:12 复制链接投1票
不少朋友经常问我,你站上的网页特效代码该怎么用?为什么我将代码插入到网页里没有效果呢?为什么我的特效没有图片?等等...其实对于大多数的网页特效用起来还是非常简单的,下面我简要的说一下普遍性的特效代码使用方法:
一、直接插入使用
对于大多数的网页特效都是可以直接插入到网页里使用的,举个例子:比如我想在我的网页里某个地方插入一个显示当前时间的效果,那么你可以在本站上搜索到时间的特效,比如我看到的代码如下:
",d[today.getDay()+1]," ",timeValue); //-->
上面是显示的一个当前日期时间星期的效果,在上面这些代码中最主要的就是 这一段内容了,其他的都可以不管,所以我只要把这里面的代码复制到网页里相应的位置就可以了,这种情况是比较简单的。
二、含有图片的特效
有不少朋友问我为什么我的特效没有效果呢?也看不到图片!
我们还是举个例子来说吧,比如爬向鼠标的好多蚂蚁这个特效,首先我们可以确定这个特效是属于第一种类型的就是直接将里的代码插入网页中就可以直接使用的,但是为什么预览的时候看不到蚂蚁呢???我们知道那些蚂蚁实际上都是一些图片,然后程序上让这些图片运动而已,所以你看不到图片的原因是:你有没有把图片保存到自己的电脑上呢,我们从这个特效里的代码可以看到下面的一段代码:
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这个图片我可以直接在网页上另存为,也可以这样
https://www.doczj.com/doc/ad11126801.html,/JsCode/images/antdl.gif ,这里面的诀窍你自己体会吧。把所有的图片下载到电脑上后我们就要设置好这个特效使用的图片的路径,比如你这个网页名字叫aa.htm 放在d:/web/myweb/aa.htm下面的,首先我们要在myweb这个文件夹下建立一个images文件夹,将那些图片都放在这里面,这时候你再预览肯定就有效果,当然你也可以建立一个img文件夹或其他的随便你,但是这时候代码里的var dir = "images/";这个就要随之修改,同理图片的名字你也可以自己随便定义,但是要保证代码里的图片跟实际路径里的图片名字对应。
三、需要定义样式的特效
这种情况在css效果里比较多,有好多朋友直接把body里的代码复制过去了,可是忘记了head里可能还有个style没有复制过去,这样预览的时候肯定没有效果的。
还是举例子,比如用CSS设计艺术字这个效果,我们可以看到下面这个代码段:
这段代码按照标准写法应该放在
之间的,在这个特效中写的不够规范但是不影响浏览效果,里面的内容就是定义了这个效果里所用到的样式,我们可以看到一些基本的文字大小颜色等等属性。所以没有这个样式控制,是看不到效果的。四、需要页面加载的特效
这种效果大家也经常遇到,很多时候大家调试来调试去就是没有效果,对照了所有的代码确定没有错误,可是还是看不到效果,怎么回事?可能就是你没有加载这个效果啦,什么意思?比如好多效果是代码已经写好的函数放在页面里,这时候别人打开网页的时候,必须得加载这个函数才能启动这个效果。我们还是举例子来说吧,看下面这个特效:
Grow=new Array();
Step=new Array();
Cstep=new Array();
NsSize=new Array();
Ns=(https://www.doczj.com/doc/ad11126801.html,yers)?1:0;
Pos=-1;
Jog=1;
Timer=null;
for(i=0; i <= 6; i++){
Pics="Images/0427"+i+".gif";
}
function PreLoad(){
for(i=0; i < Pics.length; i++){
Load=new Image();
Load.src=Pics;
}
}
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=(https://www.doczj.com/doc/ad11126801.html,yers)?window.innerHeight+window.pageYOffset:window.docu ment.body.clientHeight+document.body.scrollTop;
W=(https://www.doczj.com/doc/ad11126801.html,yers)?window.innerWidth+window.pageXOffset:window.docu ment.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=(https://www.doczj.com/doc/ad11126801.html,yers)?window.innerHeight:window.document.body.clientHei ght;
for (i=0; i < Amount; i++){
Ypos=Math.random()*H2-50;
Xpos=-50;
Speed=Math.random()*10+1;
Cstep=0;
Step=Math.random()*0.1+0.05;
Grow=4;
NsSize=Math.random()*4+6;
Rate=Math.random()*0.5+0.1;
}
if (Ns){
for (i = 0; i < Amount; i++){
document.write(" src="+Image0.src+" name='N' width="+NsSize+" height="+NsSize+">
}
document.write("
}
else{
document.write('
for (i = 0; i < Amount; i++){
document.write('
style="position:absolute;top:-100px;left:0px;filter:alpha(opacity=90)">'); }
document.write('
document.write('
+'
style="position:absolute;top:-100px;left:0px">
}
function Bubbles(){
Hs=(https://www.doczj.com/doc/ad11126801.html,yers)?window.pageYOffset:document.body.scrollTop;
Ws=(https://www.doczj.com/doc/ad11126801.html,yers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed*Math.sin(270*Math.PI/180);
sx = Speed*Math.cos(Cstep*5);
Ypos+=sy;
Xpos+=sx;
if (Ypos < -40){
if (Ns) {Ypos=document.nfish.top;Xpos=document.nfish.left}
else {Ypos=ifish.style.pixelTop;Xpos=ifish.style.pixelLeft}
Speed= 6+Math.random()*3;
Grow=4;
NsSize=Math.random()*4+6;
}
if (Ns){
https://www.doczj.com/doc/ad11126801.html,yers['sn'+i].left=Xpos+Ws;
https://www.doczj.com/doc/ad11126801.html,yers['sn'+i].top=Ypos+Hs;
}
else{
si.style.pixelLeft=Xpos+Ws;
si.style.pixelTop=Ypos+Hs;
si.style.width=Grow;
si.style.height=Grow;
}
Grow+=Rate;
Cstep+=Step;
if (Grow > 15) Grow=16;
}
setTimeout('Bubbles()',10);
}
function Start(){
AniFish();
MoveFish();
Bubbles();
}
//-->
这个效果大家应该看到过了吧没看过的点击:
https://www.doczj.com/doc/ad11126801.html,/JsHtml/Js690.htm 首先这个特效也是属于第一种情况直接将代码插入就可以使用的,同时他也用到了图片,按照第二种方法保存图片。可是仅仅完成这两步是不够的,仔细看这个代码我们会发现body里多了一行代码
onLoad="Start()">,你是否漏掉了onLoad="Start()"这个呢?说到这里就行了至于这个属性或函数怎么写的就不需要了,在这里我仅仅是提醒大家不要忘记这个地方。
五、需要调用第三方文件的特效
这种情况一般是用在比较复杂的效果中,比如可控制的用FLASH控件实现的图片渐显JS 效果这个就需要一个外部文件,紧紧把所有代码复制过去是没用的。对于像类似的需要调用其它文件的我都会说明出来的或者直接提供外部文件的下载地址,他可能是个flash也可能是htm网页还有可能是是其它形式的函数库之类的,比如类似的还有在时间特效里我整理的几个弹出选择日期效果的特效。当然下载下来的文件也不是随便放的,具体的使用方法和图片是类似的,我们要找到代码中调用这个文件的地方,然后看看是直接放在根目录下还是需要放在某个文件夹下的。
上面我简要的说了一下特效的使用方法,紧紧是一些方法和小技巧,没什么技术上的东西,所以有些专业术语我都可能尽量的普通化一点,当然在做网页的时候我们还会遇到其它的一
些问题,希望大家能举一反三,遇到不懂的在自己努力之后没有解决的可以利用搜索引擎也可以到本站来提问
网页制作特效——网页特效 (1)导航菜单:
js脚本结束 4。简单的页面加密 等等标志对,这些标志对都是描述Html 文档相关信息的标志对,
标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。 3. 是Html文档的主体部分,在此标志对之间可包含、< /p>、1) 贴图: 2)加入连接:写上你想写的字 3)在新窗口打开连接:写上 要写的字 消除连接的下划线在新窗口打开连接: 写上你想写的字 4)移动字体(走马灯): 5)字体加粗:写上你想写的字 6)字体斜体:写上你想写的字 7)字体下划线: 写上你想写的字 8)字体删除线: 写上你想写的字
9)字体加大: 写上你想写的字 10)字体控制大小: