让网页靓起来常见网页特效使用方法
[日期:12-20] 来源:作者:[字体:大中小]
怎么使用网页特效?
不少朋友经常问我,你站上的网页特效代码该怎么用?为什么我将代码插入到网页里没有效果呢?为什么我的特效没有图片?等等...其实对于大多数的网页特效用起来还是非常简单的,下面我简要的说一下普遍性的特效代码使用方法:
一、直接插入使用
对于大多数的网页特效都是可以直接插入到网页里使用的,举个例子:比如我想在我的网页里某个地方插入一个显示当前时间的效果,那么你可以在本站上搜索到时间的特效,比如我看到的代码如下:
以下是引用片段:
","",today.getMonth()+1,"月
","",today.getDate(),"
日 ",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这个图片我可以直接在网页上另存
为,也可以这样[img]https://www.doczj.com/doc/a3638197.html,/JsCode/images/antdl.gif[/img] ,这里面的诀窍你自己体会吧。把所有的图片下载到电脑上后我们就要设置好这个特效使用的图片的路径,比如你这个网页名字叫aa.ht
m 放在d:/web/myweb/aa.htm下面的,首先我们要在myweb这个文件夹下建立一个images文件夹,将那些图片都放在这里面,这时候你再预览肯定就有效果,当然你也可以建立一个img文件夹或其他的随便你,但是这时候代码里的var dir = "images/";这个就要随之修改,同理图片的名字你也可以自己随便定义,但是要保证代码里的图片跟实际路径里的图片名字对应。
三、需要定义样式的特效
这种情况在css效果里比较多,有好多朋友直接把body里的代码复制过去了,可是忘记了head里可能还有个style没有复制过去,这样预览的时候肯定没有效果的。
还是举例子,比如用CSS设计艺术字这个效果,我们可以看到下面这个代码段:
以下是引用片段:
这段代码按照标准写法应该放在
之间的,在这个特效中写的不够规范但是不影响浏览效果,里面的内容就是定义了这个效果里所用到的样式,我们可以看到一些基本的文字大小颜色等等属性。所以没有这个样式控制,是看不到效果的。四、需要页面加载的特效
这种效果大家也经常遇到,很多时候大家调试来调试去就是没有效果,对照了所有的代码确定没有错误,可是还是看不到效果,怎么回事?可能就是你没有加载这个效果啦,什么意思?比如好多效果是代码已经
写好的函数放在页面里,这时候别人打开网页的时候,必须得加载这个函数才能启动这个效果。我们还是举例子来说吧,看下面这个特效:
以下是引用片段:
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/a3638197.html,yers)?window.innerHeight+window.pageYOffset:window.document.body.clientHeight
+document.body.scrollTop;
W=(https://www.doczj.com/doc/a3638197.html,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=(https://www.doczj.com/doc/a3638197.html,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("
}
document.write("
}
else{
document.write('
for (i = 0; i < Amount; i++){
document.write('');
}
document.write('
document.write('
+'
;
}
function Bubbles(){
Hs=(https://www.doczj.com/doc/a3638197.html,yers)?window.pageYOffset:document.body.scrollTop; Ws=(https://www.doczj.com/doc/a3638197.html,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){
https://www.doczj.com/doc/a3638197.html,yers['sn'+i].left=Xpos[i]+Ws;
https://www.doczj.com/doc/a3638197.html,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();
}
//-->
网页设计模拟题三 一、单项选择题 1.HTML文本显示状态代码中,表示?() A文本加注下标线 B文本加注上标线 C文本闪烁 D文本或图片居中 2.动态HTML中设定路径移动时间的属性是?() A.Bounce B.Duration C.Repeat D.Target 3.下面CGI脚本中的通用格式和content-types不是一一对应的是哪一项?() A.HTML与text/html B.Text与text/plain C.GIF与image/gif D.MPEG与image/jpeg 4.下列对CSS内容表述不正确的一项是?() A伪类和伪元素不应用HTML的CLASS属性来指定 B一般的类不可以与伪类和伪元素一起使用 C一个已访问连接可以定义为不同颜色的显示 D一个已访问连接可以定义为不同字体大小和风格 5.用户可以在()命令的动作中见到canAcceptCommand。 A. Sort Table B. Format Table C. Set Color Scheme D. Clean Up HTML 6.创建一个滚动菜单的HTML代码是?() A.
B. C.