精品主页 | 软件下载 | 系统下载 | 精品导航| 精彩图片 | 转帖工具 | 版主申请 | 影视下载
发新话题
打印

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

本主题由 xiaoma 于 2008-4-4 22:46 移动

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

  


                  







上面是显示的一个当前日期时间星期的效果,在上面这些代码中最主要的就是<script language="JavaScript">...</script> 这一段内容了,其他的都可以不管,所以我只要把<script language="JavaScript">...</script>这里面的代码复制到网页里相应的位置就可以了,这种情况是比较简单的。


  


                  




二、含有图片的特效



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



我们还是举个例子来说吧,比如 爬向鼠标的好多蚂蚁 这个特效,首先我们可以确定这个特效是属于第一种类型的就是直接将<script language="JavaScript">...</script>里的代码插入网页中就可以直接使用的,但是为什么预览的时候看不到蚂蚁呢???我们知道那些蚂蚁实际上都是一些图片,然后上让这些图片运动而已,所以你看不到图片的原因是:你有没有把图片保存到自己的电脑上呢,我们从这个特效里的代码可以看到下面的一段代码:














vardir="images/";

varimages=newArray(

dir "antdl.gif",

dir "antdn.gif",

dir "antdr.gif",

dir "antlt.gif",

dir "antrt.gif",

dir "antul.gif",

dir "antup.gif",

dir "antur.gif[/img]);






这段代码就是调用图片的路径和名称,首先是在images文件夹下的,下面就是用到的所有图片,你需要将这些图片都要下载到自己的电脑上。怎么下载?比如我下载antdl.gif这个图片 我可以直接在网页上另存为,也可以这样 ,这里面的诀窍你自己体会吧。把所有的图片下载到电脑上后我们就要设置好这个特效使用的图片的路径,比如你这个网页名字叫aa.htm 放在d:/web/myweb/aa.htm下面的,首先我们要在myweb这个文件夹下建立一个images文件夹,将那些图片都放在这里面,这时候你再预览肯定就有效果,当然你也可以建立一个img文件夹或其他的随便你,但是这时候代码里的var dir = "images/";这个就要随之修改,同理图片的名字你也可以自己随便定义,但是要保证代码里的图片跟实际路径里的图片名字对应。


  


                  




三、需要定义样式的特效



这种情况在css效果里比较多,有好多朋友直接把body里的代码复制过去了,可是忘记了head里可能还有个style没有复制过去,这样预览的时候肯定没有效果的。



还是举例子,比如 用CSS设计艺术字 这个效果,我们可以看到下面这个代码段:














<styletype="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>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<title>网页特效观止|www.jscode.cn|---页面游动吐泡小鱼</title>

</head>



<bodyonLoad="Start()">

<scriptlanguage="JavaScript">

<!--

Image0=newImage();

Image0.src="http://www.jscode.cn/Uploadfile/2006515152552219.GIF";

Amount=12;

Pics=newArray();

Load=newArray();

Ypos=newArray();

Xpos=newArray();

Speed=newArray();

Rate=newArray();

Grow=newArray();

Step=newArray();

Cstep=newArray();

NsSize=newArray();

Ns=(document.layers)?1:0;

Pos=-1;

Jog=1;

Timer=null;

for(i=0;i<=6;i  ){

Pics="Images/0427" i ".gif";

}

functionPreLoad(){

for(i=0;i<Pics.length;i  ){

Load=newImage();

Load.src=Pics;

}

}

PreLoad();

Strt=0-(Load[0].width 50);

functionAniFish(){

Pos =Jog;

if(Pos>=Pics.length)Pos=0;

if(Ns)document.nfish.document.images.nframe.src=Pics[Pos];

elsedocument.images.iframe.src=Pics[Pos];

Timer=setTimeout('AniFish()',50)

}

functionMoveFish(){

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=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("<layername='sn" i "'left=0top=-50><imgsrc=" Image0.src "name='N'width=" NsSize "height=" NsSize "></layer>");

}

document.write("<layername='nfish'left=0top=-50><imgsrc='0.gif'name='nframe'></layer>");

}

else{

document.write('<divstyle="position:absolute;top:0px;left:0px"><divstyle="position:relative">');

for(i=0;i<Amount;i  ){

document.write('<imgid="si"src="' Image0.src '"style="position:absolute;top:-100px;left:0px;filter:alpha(opacity=90)">');

}

document.write('</div></div>');

document.write('<divstyle="position:absolute;top:0px;left:0px"><divstyle="position:relative">'

'<imgid="ifish"src="0.gif"name="iframe"style="position:absolute;top:-100px;left:0px"></div></div>');

}

functionBubbles(){

Hs=(document.layers)?window.pageYOffset:document.body.scrollTop;

Ws=(document.layers)?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){

document.layers['sn' i].left=Xpos Ws;

document.layers['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);

}

functionStart(){

AniFish();

MoveFish();

Bubbles();

}

//-->

</script>

</body>



</html>



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



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



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



上面我简要的说了一下特效的使用方法,紧紧是一些方法和小技巧,没什么技术上的东西,所以有些专业术语我都可能尽量的普通化一点,当然在做网页的时候我们还会遇到其它的一些问题,希望大家能举一反三

TOP

发新话题