JavaScript特效制作精讲

《JavaScript特效制作精讲》由会员分享，可在线阅读，更多相关《JavaScript特效制作精讲（21页珍藏版）》请在金锄头文库上搜索。

1、-JavaScript 特效制作精讲目录：目录：技巧 1：添加提示技巧 2：在网页中参加最后修改日期技巧 3：实现图片循环隐现的效果技巧 4：给图像添加探照灯效果。技巧 5：翻开一个新的浏览器窗口并设置窗口的属性技巧 6：利用单机来关闭浏览器窗口技巧 7：制止保存网页技巧 8：制作网页中雪花飘飘的效果技巧 9：在状态栏中显示跑马灯效果技巧 10：制作烟花效果技巧 11：制作状态栏数字时钟技巧 12：制作围绕鼠标指针旋转的文本技巧 13：制作跟随鼠标指针飘动的双层时钟技巧 14：实现每天不同时间显示不同信息技巧 15：制止鼠标右键和左键对页面的操作技巧 16：实现鼠标指针移上时图片加亮的效果技巧

2、 17：让网页中跳出一个会说话的老人技巧 18：让浏览者知道自己网页的次数技巧 19：制止页面最小化技巧 20：设置网页由中间向外扩大变化.z.-技巧 1：添加提示添加提示，在要添加的位置输入以下代码。添加提示，在要添加的位置输入以下代码。OnMouseOver=window.status=添加提示 .; return true OnMouseOut=window.status=;return true技巧 2：在网页中参加最后修改日期在网页中参加最后修改日期，在在网页中参加最后修改日期，在与与之间输入以下代码。之间输入以下代码。document.write(最后修改日期 + document

3、.lastModified);技巧 3：实现图片循环隐现的效果制作图片循环隐现效果的具体操作步骤如下：制作图片循环隐现效果的具体操作步骤如下：在在与与之间输入以下代码。之间输入以下代码。var b = 1;var c = true;function fade()if(document.all);if(c = true) b+;if(b=100) b-;c = falseif(b=10) b+;c = true;if(c = false) b-;u.filters.alpha.opacity=0 + b;setTimeout(fade(),50);将光标位置放置在将光标位置放置在标记内，输入代码

4、标记内，输入代码onLoad=fade().z.-将光标位置放置在图片将光标位置放置在图片标记内，输入以下代码。标记内，输入以下代码。align=middle name=n style=filter:aipha(opacity=0)技巧 4：给图像添加探照灯效果。在在与与之间输入以下代码。之间输入以下代码。#spotlightfilter:light将光标位置放置在图片将光标位置放置在图片标记内，输入以下代码。标记内，输入以下代码。Id=spotlight speed=50 将光标放置在图片标记的右边，输入以下代码。将光标放置在图片标记的右边，输入以下代码。if (document.all&w

5、indow.spotlight)var *=new Array()var direction=new Array()var y=new Array()if (spotlight.length=null)*0=0direction0=righty0=spotlight0.heightspotlight0.filters.light.addPoint(100,50,100,255,255,255,90)elsefor (i=0;ispotlight.length;i+)*i=0directioni=rightyi=spotlighti.heightspotlighti.filters.light.

6、addPoint(100,50,100,255,255,255,90)function slidelight(cur)spotlightcur.filters.light.MoveLight(0,*cur,ycur,200,-1)if (*curspotlightcur.width+200)directioncur=left*cur-=10.z.-else if (*cur-200&*cur-185)directioncur=right*cur+=10else*cur-=10directioncur=leftif (document.all&window.spotlight)if (spotl

7、ight.length=null)setInterval(slidelight(0),spotlight0.speed)elsefor (t=0;tspotlight.length;t+)var temp=setInterval(slidelight(+t+),+spotlightt.speed+)eval(temp)技巧 5：翻开一个新的浏览器窗口并设置窗口的属性在在与与之间输入以下代码。之间输入以下代码。将光标位置放置在将光标位置放置在标记内，输入以下代码。标记内，输入以下代码。onload=MM_openBrWindow(tanch.html,status=yes,menubar=yes

8、,width=400,height=400)技巧 6：利用单机来关闭浏览器窗口选中单击后关闭浏览器窗口的对象，选中单击后关闭浏览器窗口的对象，在在【属性】【属性】面板中的文本框中输入以下面板中的文本框中输入以下代码。代码。javascript:window.close()技巧 7：制止保存网页制作制止保存网页效果，在制作制止保存网页效果，在与与之间相应位置输入以下代码。之间相应位置输入以下代码。.z.-技巧 8：制作网页中雪花飘飘的效果制作网页中雪花飘飘的效果，在制作网页中雪花飘飘的效果，在与与之间输入以下代码。之间输入以下代码。var snowsrc=l.gifvar no = 10;var

9、 ns4up = (document.layers) 1 : 0;var ie4up = (document.all) 1 : 0;var d*, *p, yp;var am, st*, sty;var i, doc_width = 800, doc_height =600;if (ns4up) doc_width = self.innerWidth;doc_height = self.innerHeight; else if (ie4up) doc_width = document.body.clientWidth;doc_height = document.body.clientHeigh

10、t;d* = new Array();*p = new Array();yp = new Array();am = new Array();st* = new Array();sty = new Array();for (i = 0; i no; + i) d*i = 0;*pi = Math.random()*(doc_width-50);ypi = Math.random()*doc_height;ami = Math.random()*20;st*i = 0.02 + Math.random()/10;styi = 0.7 + Math.random();if (ns4up) if (i

11、 = 0) document.write(); else document.write(); else if (ie4up) if (i = 0) .z.-document.write(); else document.write();function snowNS() for (i = 0; i doc_height-50) *pi = Math.random()*(doc_width-ami-30);ypi = 0;st*i = 0.02 + Math.random()/10;styi = 0.7 + Math.random();doc_width = self.innerWidth;do

12、c_height = self.innerHeight;d*i += st*i;document.layersdot+i.top = ypi;document.layersdot+i.left = *pi + ami*Math.sin(d*i);setTimeout(snowNS(), 10);function snowIE() for (i = 0; i doc_height-50) *pi = Math.random()*(doc_width-ami-30);ypi = 0;st*i = 0.02 + Math.random()/10;styi = 0.7 + Math.random();

13、doc_width = document.body.clientWidth;doc_height = document.body.clientHeight;d*i += st*i;document.alldot+i.style.pi*elTop = ypi;document.alldot+i.style.pi*elLeft = *pi + ami*Math.sin(d*i);setTimeout(snowIE(), 10);.z.-if (ns4up) snowNS(); else if (ie4up) snowIE();技巧 9：在状态栏中显示跑马灯效果制作在状态栏中显示跑马灯效果，在制作在

14、状态栏中显示跑马灯效果，在与与之间输入以下代码。之间输入以下代码。 100) seed-=2;var cmd=Helpor_net( + seed + );timerTwo=window.setTimeout(cmd,speed);else if (seed 0) for (c=0 ; c seed ; c+) out+= ;out+=msg; seed-=2;var cmd=Helpor_net( + seed + );window.status=out;timerTwo=window.setTimeout(cmd,speed); else if (seed = 0) if (-seed 技

15、巧 10：制作烟花效果在在与与之间输入以下代码。之间输入以下代码。if (document.all)*L=5;*H=0;*W=0;*R=0;*E=0;*MY=0;*M*=0;*Wd=0;*Hd=0;*F=new Array();*Y=new Array();*=new Array();*S=new Array();*A=new Array();*B=new Array();ini=new Array();cl=new Array(#fff000,#0000FF,#ff0000,#00ff00,#ff00ff,#ffa500)document.write();for (i=0; i *L; i+

16、)document.write(.);document.write();/Initial Placement!function Set()for (i=0; i *L; i+)*H=window.document.body.offsetHeight;*W=window.document.body.offsetWidth;*Ai=Math.round(Math.random()*H);*Bi=Math.round(Math.random()*W);*Si=Math.random()*0.07+0.05;*R=Math.round(Math.random()*3);*E=Math.round(Ma

17、th.random()*2500+50)if (*R = 3) *Bi=-*E;if (*R = 2) *Bi=*W+*E;.z.-if (*R = 1) *Ai=-*E;if (*R = 0) *Ai=*H;*Fi=*W/14;Set();function Assign()*outer.style.top=document.body.scrollTop;for (i=0; i *L; i+)*Fi-=*Si*25;if (*Fi 4) *Fi=3;*iei.style.top =*Yi;*iei.style.left=*i;*iei.style.fontSize=*Fi;*iei.style

18、.filter=glow(color=+inii+, strength=+*Fi/3+);function fly()var N=Math.floor(Math.random()*cl.length)*MY=window.document.body.clientHeight/2;*M*=window.document.body.clientWidth/2;*Wd=Math.round(Math.random()*40+5);*Hd=Math.round(Math.random()*30+5);for (i=0; i *M*-*Wd) & (*i *MY-*Hd) & (*Yi *MY+*Hd)

19、*H=window.document.body.offsetHeight;*W=window.document.body.offsetWidth;*Ai=Math.round(Math.random()*H);*Bi=Math.round(Math.random()*W);*Si=Math.random()*0.05+0.05;*R=Math.round(Math.random()*3);*E=Math.round(Math.random()*50+50)if (*R = 3) *Bi=-*E;if (*R = 2) *Bi=*W+*E;if (*R = 1) *Ai=-*E;if (*R =

20、 0) *Ai=*H+*E;if (*i *W) | (*Yi *H)*Fi=*W/14;.z.-inii=clN;Assign();setTimeout(fly(),10);fly()/ -技巧 11：制作状态栏数字时钟：制作状态栏数字时钟效果的具体操作步骤如下：制作状态栏数字时钟效果的具体操作步骤如下：在在与与之间输入以下代码。之间输入以下代码。var timerID = null;var timerRunning = false;function stopclock ()if(timerRunning)clearTimeout(timerID);timerRunning = false;

21、function showtime () var now = new Date();var hours = now.getHours();var minutes = now.getMinutes();var seconds = now.getSeconds()var timeValue = + (hours 12) hours -12 :hours)timeValue += (minutes 10) :0 : :) + minutestimeValue += (seconds = 12) 下午 : 上午window.status = timeValue;timerID = setTimeout

22、(showtime(),1000);timerRunning = true;function startclock () stopclock();showtime();将光标位置放置在将光标位置放置在标记内，输入代码标记内，输入代码onLoad=startclock().z.-技巧 12：制作围绕鼠标指针旋转的文本制作围绕鼠标指针旋转的文本，在制作围绕鼠标指针旋转的文本，在与与之间输入以下代码。之间输入以下代码。yourLogo=围绕鼠标指针旋转的文本;logoFont=Arial;logoSize=9;logoColor=red;logoWidth=40;logoHeight=40;logo

23、Speed=0.03;yourLogo=yourLogo.split();L=yourLogo.length;Result=;TrigSplit=360/L;br=(document.layers)1:0;if (br)for (i=0; i L; i+)document.write(+Result+yourLogoi+);elsedocument.write();for (i=0; i L; i+)document.write(+Result+yourLogoi+);document.write();ypos=0;*pos=0;step=logoSpeed;currStep=0;Y=new

24、Array();*=new Array();Yn=new Array();*n=new Array();for (i=0; i L; i+)Yni=0;*ni=0;.z.-(document.layers)window.captureEvents(Event.MOUSEMOVE):0;function Mouse(evnt)ypos = (document.layers)evnt.pageY:event.y;*pos = (document.layers)evnt.page*:event.*;(document.layers)window.onMouseMove=Mouse:document.

25、onmousemove=Mouse;function animateLogo()if (!br)outer.style.pi*elTop=document.body.scrollTop;for (i=0; i = 0; i-)Yi=Yni+=(ypos-Yni)*(0.1+i/L);*i=*ni+=(*pos-*ni)*(0.1+i/L);animateLogo();setTimeout(Delay(),20);window.onload=Delay;/ -技巧 13：制作跟随鼠标指针飘动的双层时钟制作跟随鼠标指针飘动的双层时钟，在制作跟随鼠标指针飘动的双层时钟，在 与与之间输入以下代之间输入

26、以下代码。码。dCol=000000;fCol=000000;sCol=000000;mCol=000000;hCol=000000;ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouse*=100;d=new.z.-Array(SUNDAY,MONDAY,TUESDAY,WEDNESDAY,THURSDAY,FRIDAY,SATURDAY);m=newArray(JANUARY,FEBRUARY,MARCH,APRIL,MAY,JUNE,JULY,AUGUST,SEPTEMBER,OCTOBER,NOVEMBER,DECEM

27、BER);date=new Date();day=date.getDate();year=date.getYear();if (year 2000) year=year+1900;TodaysDate= +ddate.getDay()+ +day+ +mdate.getMonth()+ +year;D=TodaysDate.split();H=.;H=H.split();M=.;M=M.split();S=.;S=S.split();Face=1 2 3 4 5 6 7 8 9 10 11 12;font=Arial;size=1;speed=0.6;ns=(document.layers);

28、ie=(document.all);Face=Face.split( );n=Face.length;a=size*10;ymouse=0;*mouse=0;scrll=0;props=;props2=;Split=360/n;Dsplit=360/D.length;HandHeight=ClockHeight/4.5HandWidth=ClockWidth/4.5HandY=-7;Hand*=-2.5;scrll=0;step=0.06;currStep=0;y=new Array();*=new Array();Y=new Array();*=new Array();for (i=0; i

29、 n; i+)yi=0;*i=0;Yi=0;*i=0Dy=new Array();D*=new Array();DY=new Array();D*=new Array();for (i=0; i D.length; i+)Dyi=0;D*i=0;DYi=0;D*i=0.z.-if (ns)for (i=0; i D.length; i+)document.write(+props2+Di+);for (i=0; i n; i+)document.write(+props+Facei+);for (i=0; i S.length; i+)document.write(+Si+);for (i=0

30、; i M.length; i+)document.write(+Mi+);for (i=0; i H.length; i+)document.write(+Hi+);if (ie)document.write();for (i=0; i D.length; i+)document.write(+props2+Di+);document.write();document.write();for (i=0; i n; i+)document.write(+props+Facei+);document.write();document.write();for (i=0; i H.length; i

31、+)document.write(+Hi+);document.write();document.write();for (i=0; i M.length; i+)document.write(+Mi+);document.write()document.write();for (i=0; i S.length; i+)document.write(+Si+);document.write()(ns)window.captureEvents(Event.MOUSEMOVE):0;function Mouse(evnt)ymouse(ns)evnt.pageY+ClockFromMouseY-(

32、window.pageYOffset):event.y+ClockFromMouseY;*mouse = (ns)evnt.page*+ClockFromMouse*:event.*+ClockFromMouse*;(ns)window.onMouseMove=Mouse:document.onmousemove=Mouse;function ClockAndAssign()time = new Date ();secs = time.getSeconds();sec = -1.57 + Math.PI * secs/30;mins = time.getMinutes();min = -1.5

33、7 + Math.PI * mins/30;hr = time.getHours();hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes()/360;if (ie)Od.style.top=window.document.body.scrollTop;Of.style.top=window.document.body.scrollTop;Oh.style.top=window.document.body.scrollTop;Om.style.top=window.document.body.scrollTop;Os.st

34、yle.top=window.document.body.scrollTop;for (i=0; i n; i+)var F=(ns)document.layersnsFace+i:ieFacei.style;F.top=yi + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;F.left=*i + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);for (i=0; i H.length; i+)var HL=(ns)document.layersnsHours+i:ie

35、Hoursi.style;HL.top=yi+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;HL.left=*i+Hand*+(i*HandWidth)*Math.cos(hrs);for (i=0; i M.length; i+)var ML=(ns)document.layersnsMinutes+i:ieMinutesi.style;.=z.-ML.top=yi+HandY+(i*HandHeight)*Math.sin(min)+scrll;ML.left=*i+Hand*+(i*HandWidth)*Math.cos(min);for (i=0;

36、i S.length; i+)var SL=(ns)document.layersnsSeconds+i:ieSecondsi.style;SL.top=yi+HandY+(i*HandHeight)*Math.sin(sec)+scrll;SL.left=*i+Hand*+(i*HandWidth)*Math.cos(sec);for (i=0; i D.length; i+)var DL=(ns)document.layersnsDate+i:ieDatei.style;DL.top=Dyi + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math

37、.PI/180)+scrll;DL.left=D*i + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);currStep-=step;function Delay()scrll=(ns)window.pageYOffset:0;Dy0=Math.round(DY0+=(ymouse)-DY0)*speed);D*0=Math.round(D*0+=(*mouse)-D*0)*speed);for (i=1; i D.length; i+)Dyi=Math.round(DYi+=(Dyi-1-DYi)*speed);D*i=Math

38、.round(D*i+=(D*i-1-D*i)*speed);y0=Math.round(Y0+=(ymouse)-Y0)*speed);*0=Math.round(*0+=(*mouse)-*0)*speed);for (i=1; i n; i+)yi=Math.round(Yi+=(yi-1-Yi)*speed);*i=Math.round(*i+=(*i-1-*i)*speed);ClockAndAssign();setTimeout(Delay(),20);if (ns|ie)window.onload=Delay;技巧 14：实现每天不同时间显示不同信息实现每天不同时间显示不同信息，

39、在实现每天不同时间显示不同信息，在与与之间输入以下代码。之间输入以下代码。!-now = new Date(),hour = now.getHours()if(hour 6)document.write(凌晨好!)else if (hour 9)document.write(早上好!)else if (hour 12)document.write(上午好!).z.-else if (hour 14)document.write(中午好!)else if (hour 17)document.write(下午好!)else if (hour 19)document.write(黄昏好!)else

40、if (hour 技巧 15：制止鼠标右键和左键对页面的操作制止鼠标右键和左键对页面的操作，在制止鼠标右键和左键对页面的操作，在 与与之间输入以下代之间输入以下代码。码。function click() alert(制止左键复制！) function click1() if (event.button=2) alert(制止右键复制！) function CtrlKeyDown()if (event.ctrlKey) alert(不当的拷贝将损害您的系统！) document.onkeydown=CtrlKeyDown;document.onselectstart=click;document

41、.onmousedown=click1;技巧 16：实现鼠标指针移上时图片加亮的效果在在与与之间输入以下代码。之间输入以下代码。BODY BACKGROUND-IMAGE: url(image/bj.gif); MARGIN: 0p*.unnamed1 FONT-SIZE: 12p*; LINE-HEIGHT: 200%将光标放置在当鼠标指针移上时加亮图片的将光标放置在当鼠标指针移上时加亮图片的 标记内，输入以下代标记内，输入以下代码。码。style=filter:alpha(opacity=20)onMouseOut=makevisible(this,1)onMouseOver=makevi

42、sible(this,0)技巧 17：让网页中跳出一个会说话的老人制作让网页中跳出一个会说话的老人效果，制作让网页中跳出一个会说话的老人效果， 在在与与之间输入以之间输入以下代码。下代码。技巧 18：让浏览者知道自己网页的次数让浏览者知道自己网页的次数，在让浏览者知道自己网页的次数，在与与之间输入以下代码。之间输入以下代码。var caution = falsefunction setCookie(name, value, e*pires, path, domain, secure) var curCookie = name + = + escape(value) +(e*pires) ; e

43、*pires= + e*pires.toGMTString() : ) +(path) ; path= + path : ) +(domain) ; domain= + domain : ) +(secure) ; secure : ).z.-if (!caution | (name + = + escape(value).length 0)date.setTime(date.getTime() - skew)var now = new Date()fi*Date(now)now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)var vis

44、its = getCookie(counter)if (!visits)visits = 1elsevisits = parseInt(visits) + 1setCookie(counter, visits, now)document.write(您已本站 + visits + 次.)技巧 19：制止页面最小化.z.-制止页面最小化，可在制止页面最小化，可在标记中输入代码标记中输入代码onblur= self.focus();技巧 20：设置网页由中间向外扩大变化在在与与之间输入以下代码。之间输入以下代码。function e*pand() for(* = 0; * 50; *+) window.moveTo(screen.availWidth * -(* - 50) / 100, screen.availHeight * -(* - 50) / 100);window.resizeTo(screen.availWidth * * / 50, screen.availHeight * * / 50);window.moveTo(0,0);window.resizeTo(screen.availWidth, screen.availHeight);在在与与之间相应的位置输入以下代码。之间相应的位置输入以下代码。单击此，页面就会由中间向外扩大！.z.