《JavaScript特效制作精讲参考模板.doc》由会员分享，可在线阅读，更多相关《JavaScript特效制作精讲参考模板.doc（22页珍藏版）》请在三一文库上搜索。
1、JavaScript特效制作精讲目录：技巧1：添加链接提示技巧2：在网页中加入最后修改日期技巧3：实现图片循环隐现的效果技巧4：给图像添加探照灯效果。技巧5：打开一个新的浏览器窗口并设置窗口的属性技巧6：利用单机来关闭浏览器窗口技巧7：禁止保存网页技巧8：制作网页中雪花飘飘的效果技巧9：在状态栏中显示跑马灯效果技巧10：制作烟花效果技巧11：制作状态栏数字时钟技巧12：制作围绕鼠标指针旋转的文本技巧13：制作跟随鼠标指针飘动的双层时钟技巧14：实现每天不同时间显示不同信息技巧15：禁止鼠标右键和左键对页面的操作技巧16：实现鼠标指针移上时图片加亮的效果技巧17：让网页中跳出一个会说话的老人技巧
2、18：让浏览者知道自己访问网页的次数技巧19：禁止页面最小化技巧20：设置网页由中间向外扩大变化技巧1：添加链接提示 添加链接提示，在要添加的位置输入以下代码。OnMouseOver=window.status=添加链接提示 .; return true OnMouseOut=window.status=; return true技巧2：在网页中加入最后修改日期在网页中加入最后修改日期，在与之间输入以下代码。document.write(最后修改日期 + document.lastModified);技巧3：实现图片循环隐现的效果1 / 22制作图片循环隐现效果的具体操作步骤如下：在与之间输入
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);将光标位置放置在标记内，输入代码onLoad=fade()将光标位置放置在图片标记内，输入以下代码。align=middle name=n style=filter:aipha(opacity=0)技巧4：给图像添加探照灯效
4、果。在与之间输入以下代码。#spotlightfilter:light将光标位置放置在图片标记内，输入以下代码。Id=spotlight speed=50 将光标放置在图片标记的右边，输入以下代码。if (document.all&window.spotlight)var x=new Array()var direction=new Array()var y=new Array()if (spotlight.length=null)spotlight0=document.all.spotlightx0=0direction0=righty0=spotlight0.heightspotlight
5、0.filters.light.addPoint(100,50,100,255,255,255,90)elsefor (i=0;ispotlight.length;i+)xi=0directioni=rightyi=spotlighti.heightspotlighti.filters.light.addPoint(100,50,100,255,255,255,90)function slidelight(cur)spotlightcur.filters.light.MoveLight(0,xcur,ycur,200,-1)if (xcurspotlightcur.width+200)dire
6、ctioncur=leftxcur-=10else if (xcur-200&xcur-185)directioncur=rightxcur+=10elsexcur-=10directioncur=leftif (document.all&window.spotlight)if (spotlight.length=null)setInterval(slidelight(0),spotlight0.speed)elsefor (t=0;tspotlight.length;t+)var temp=setInterval(slidelight(+t+),+spotlightt.speed+)eval
7、(temp)技巧5：打开一个新的浏览器窗口并设置窗口的属性在与之间输入以下代码。将光标位置放置在标记内，输入以下代码。onload=MM_openBrWindow(tanch.html,status=yes,menubar=yes,width=400,height=400)技巧6：利用单机来关闭浏览器窗口选中单击后关闭浏览器窗口的对象，在【属性】面板中的链接文本框中输入以下代码。javascript:window.close()技巧7：禁止保存网页制作禁止保存网页效果，在与之间相应位置输入以下代码。技巧8：制作网页中雪花飘飘的效果制作网页中雪花飘飘的效果，在与之间输入以下代码。 var sno
8、wsrc=l.gif var no = 10; var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; var am, stx, 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;
9、doc_height = document.body.clientHeight; dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i no; + i) dxi = 0; xpi = Math.random()*(doc_width-50); ypi = Math.random()*doc_height; ami = Math.random()*20; stxi = 0.02 + Math.random
10、()/10; styi = 0.7 + Math.random(); if (ns4up) if (i = 0) document.write(); else document.write(); else if (ie4up) if (i = 0) document.write(); else document.write(); function snowNS() for (i = 0; i doc_height-50) xpi = Math.random()*(doc_width-ami-30); ypi = 0; stxi = 0.02 + Math.random()/10; styi =
11、 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; dxi += stxi; document.layersdot+i.top = ypi; document.layersdot+i.left = xpi + ami*Math.sin(dxi); setTimeout(snowNS(), 10); function snowIE() for (i = 0; i doc_height-50) xpi = Math.random()*(doc_width-ami-30); ypi = 0
12、; stxi = 0.02 + Math.random()/10; styi = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; dxi += stxi; document.alldot+i.style.pixelTop = ypi; document.alldot+i.style.pixelLeft = xpi + ami*Math.sin(dxi); setTimeout(snowIE(), 10); if (ns4up) snowNS(
13、); else if (ie4up) snowIE(); 技巧9：在状态栏中显示跑马灯效果制作在状态栏中显示跑马灯效果，在与之间输入以下代码。 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,
14、speed); else if (seed = 0) if (-seed 技巧10：制作烟花效果在与之间输入以下代码。 if (document.all)xL=5; xH=0;xW=0;xR=0;xE=0;xMY=0;xMX=0;xWd=0;xHd=0;xF=new Array();xY=new Array();xX=new Array();xS=new Array();xA=new Array();xB=new Array();ini=new Array();cl=new Array(#fff000,#0000FF,#ff0000,#00ff00,#ff00ff,#ffa500)docume
15、nt.write();for (i=0; i xL; i+)document.write(.);document.write();/Initial Placement!function Set()for (i=0; i xL; i+)xH=window.document.body.offsetHeight;xW=window.document.body.offsetWidth;xAi=Math.round(Math.random()*xH);xBi=Math.round(Math.random()*xW);xSi=Math.random()*0.07+0.05;xR=Math.round(Ma
16、th.random()*3);xE=Math.round(Math.random()*2500+50)if (xR = 3) xBi=-xE;if (xR = 2) xBi=xW+xE;if (xR = 1) xAi=-xE;if (xR = 0) xAi=xH;xFi=xW/14;Set();function Assign()xouter.style.top=document.body.scrollTop;for (i=0; i xL; i+)xFi-=xSi*25;if (xFi 4) xFi=3;xiei.style.top =xYi;xiei.style.left=xXi;xiei.s
17、tyle.fontSize=xFi;xiei.style.filter=glow(color=+inii+, strength=+xFi/3+);function fly()var N=Math.floor(Math.random()*cl.length)xMY=window.document.body.clientHeight/2;xMX=window.document.body.clientWidth/2;xWd=Math.round(Math.random()*40+5);xHd=Math.round(Math.random()*30+5);for (i=0; i xMX-xWd) &
18、(xXi xMY-xHd) & (xYi xMY+xHd)xH=window.document.body.offsetHeight;xW=window.document.body.offsetWidth;xAi=Math.round(Math.random()*xH);xBi=Math.round(Math.random()*xW);xSi=Math.random()*0.05+0.05;xR=Math.round(Math.random()*3);xE=Math.round(Math.random()*50+50)if (xR = 3) xBi=-xE;if (xR = 2) xBi=xW+
19、xE;if (xR = 1) xAi=-xE;if (xR = 0) xAi=xH+xE;if (xXi xW) | (xYi xH) xFi=xW/14;inii=clN;Assign();setTimeout(fly(),10);fly()/ -技巧11：制作状态栏数字时钟：制作状态栏数字时钟效果的具体操作步骤如下：在与之间输入以下代码。var timerID = null;var timerRunning = false;function stopclock () if(timerRunning) clearTimeout(timerID); timerRunning = false;f
20、unction 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 : :) + minutes timeValue += (seconds = 12) ? 下午 : 上午 window.status = timeValue; timerID
21、 = setTimeout(showtime(),1000); timerRunning = true;function startclock () stopclock(); showtime();将光标位置放置在标记内，输入代码onLoad=startclock()技巧12：制作围绕鼠标指针旋转的文本制作围绕鼠标指针旋转的文本，在与之间输入以下代码。yourLogo=围绕鼠标指针旋转的文本;logoFont=Arial;logoSize=9;logoColor=red;logoWidth=40;logoHeight=40;logoSpeed=0.03;yourLogo=yourLogo.sp
22、lit();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;xpos=0;step=logoSpeed;currStep=0;Y=new Array();X=new Array();Yn=new
23、Array();Xn=new Array();for (i=0; i L; i+) Yni=0; Xni=0; (document.layers)?window.captureEvents(Event.MOUSEMOVE):0;function Mouse(evnt) ypos = (document.layers)?evnt.pageY:event.y; xpos = (document.layers)?evnt.pageX:event.x;(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;functi
24、on animateLogo()if (!br)outer.style.pixelTop=document.body.scrollTop; for (i=0; i = 0; i-)Yi=Yni+=(ypos-Yni)*(0.1+i/L); Xi=Xni+=(xpos-Xni)*(0.1+i/L); animateLogo();setTimeout(Delay(),20);window.onload=Delay;/ -技巧13：制作跟随鼠标指针飘动的双层时钟制作跟随鼠标指针飘动的双层时钟，在与之间输入以下代码。dCol=000000;fCol=000000;sCol=000000;mCol=00
25、0000;hCol=000000;ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;d=new Array(SUNDAY,MONDAY,TUESDAY,WEDNESDAY,THURSDAY,FRIDAY,SATURDAY);m=new Array(JANUARY,FEBRUARY,MARCH,APRIL,MAY,JUNE,JULY,AUGUST,SEPTEMBER,OCTOBER,NOVEMBER,DECEMBER);date=new Date();day=date.getDate();year=date.ge
26、tYear();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);ie=(document.all);Face=Face.split( );n=Face.length;a
27、=size*10;ymouse=0;xmouse=0;scrll=0;props=;props2=;Split=360/n;Dsplit=360/D.length;HandHeight=ClockHeight/4.5HandWidth=ClockWidth/4.5HandY=-7;HandX=-2.5;scrll=0;step=0.06;currStep=0;y=new Array();x=new Array();Y=new Array();X=new Array();for (i=0; i n; i+)yi=0;xi=0;Yi=0;Xi=0Dy=new Array();Dx=new Arra
28、y();DY=new Array();DX=new Array();for (i=0; i D.length; i+)Dyi=0;Dxi=0;DYi=0;DXi=0if (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; 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(div id=ieFace style=position:absolute;top:0px;left:0;height:+a+;width:+a+;tex