如何实现网页鼠标特效（详细教程）

登录后复制

5、围绕鼠标旋转的三叶空间旋浆

<!--//To add more stars simply add more colours in below array!!colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')//Alter nothing below!!amount=colours.length;YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,ns=(document.layers)?1:0,step=0.2,currStep=0,my=0,mx=0;if (ns){for (i=0; i < amount; i++)document.write('');}else{document.write('
');for (i=0; i < amount; i++)document.write('');document.write('');}if (ns){window.captureEvents(Event.MOUSEMOVE);function nMouse(evnt){my=evnt.pageY;mx=evnt.pageX}window.onMouseMove=nMouse;}else{function iMouse(){my=event.y;mx=event.x;}document.onmousemove=iMouse}function stars(){if (!ns)ie.style.top=document.body.scrollTop;for (i=0; i 

登录后复制

6、围绕鼠标的立体星环（摩天轮）

<!--ns=(document.layers)?1:0;Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')var amount=8var step=0.3;var currStep=0;var Ypos=0;var Xpos=0;if (ns){for (i=0; i < amount; i++)document.write('');window.captureEvents(Event.MOUSEMOVE);function nMouse(evnt){Ypos = evnt.pageY;Xpos = evnt.pageX;}window.onMouseMove=nMouse;}else{document.write('
');document.write('
');for (i=0; i < amount; i++)document.write('
');document.write('');function iMouse(){Ypos=event.y+document.body.scrollTop;Xpos=event.x+document.body.scrollLeft;}document.onmousemove = iMouse;}function Comet(){for (i=0; i 

登录后复制

7、围绕鼠标的立体旋转文字

<!-- Beginif (document.all) {yourLogo = "网页制作大宝库"; //Not less than 2 letters!logoFont = "Arial";logoColor = "ff0000";//Nothing needs altering below!yourLogo = yourLogo.split('');L = yourLogo.length;TrigSplit = 360 / L;Sz = new Array()logoWidth = 100;logoHeight = -30;ypos = 0;xpos = 0;step = 0.09;currStep = 0;document.write('
');for (i = 0; i < L; i++) {document.write('
'+yourLogo[i]+'');}document.write('');function Mouse() {ypos = event.y;xpos = event.x - 5;}document.onmousemove=Mouse;function animateLogo() {outer.style.pixelTop = document.body.scrollTop;for (i = 0; i < L; i++) {ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);Sz[i] = ie[i].style.pixelTop - ypos;if (Sz[i] 

登录后复制

8、跟随鼠标的日期时间表盘

<!--将以下代码加入HTML的之间--><!--dCol="0000FF"fCol="FF0000"sCol="00FF00"mCol="000000"hCol="000000"ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");date=new Date();day=date.getDate();year=date.getYear();if (year < 2000) year=year+1900;TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+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=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++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}if (ns){for (i=0; i < D.length; i++)document.write(''+props2+D[i]+'');for (i=0; i < n; i++)document.write(''+props+Face[i]+'');for (i=0; i < S.length; i++)document.write(''+S[i]+'');for (i=0; i < M.length; i++)document.write(''+M[i]+'');for (i=0; i < H.length; i++)document.write(''+H[i]+'');}if (ie){document.write('
');for (i=0; i < D.length; i++)document.write('
'+props2+D[i]+'');document.write('');document.write('
');for (i=0; i < n; i++)document.write('
'+props+Face[i]+'');document.write('');document.write('
');for (i=0; i < H.length; i++)document.write('
'+H[i]+'');document.write('');document.write('
');for (i=0; i < M.length; i++)document.write('
'+M[i]+'');document.write('')document.write('
');for (i=0; i < S.length; i++)document.write('
'+S[i]+'');document.write('')}(ns)?window.captureEvents(Event.MOUSEMOVE):0;function Mouse(evnt){ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;}(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.57 + 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.style.top=window.document.body.scrollTop;}for (i=0; i < n; i++){var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);}for (i=0; i < H.length; i++){var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);}for (i=0; i < M.length; i++){var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);}for (i=0; i < S.length; i++){var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);}for (i=0; i < D.length; i++){var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);}currStep-=step;}function Delay(){scrll=(ns)?window.pageYOffset:0;Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);for (i=1; i < D.length; i++){Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);}y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);for (i=1; i 

登录后复制

<!-- Beginmessage = '欢迎访问网页制作大宝库!';FonT = 'Verdana';ColoR = 'ff0000';SizE = 3; //1 to 7 only!var amount = 5, ypos =- 50, xpos = 0, Ay = 0, Ax = 0, By = 0, Bx = 0, Cy = 0, Cx = 0, Dy = 0, Dx = 0, Ey = 0, Ex = 0;if (document.layers) {for (i = 0; i < amount; i++) {document.write(''+message+'');}window.captureEvents(Event.MOUSEMOVE);function nsmouse(evnt) {xpos = evnt.pageX + 20;ypos = evnt.pageY + 20;}window.onMouseMove = nsmouse;}else if (document.all) {document.write("
");document.write("
");for (i = 0; i < amount; i++) {document.write('
'+message+'')}document.write("");document.write("");function iemouse() {ypos = event.y + 20;xpos = event.x + 20;}window.document.onmousemove = iemouse;}function makefollow() {if (document.layers) {document.layers['nsl'+0].top = ay;document.layers['nsl'+0].left = ax;document.layers['nsl'+1].top = by;document.layers['nsl'+1].left = bx;document.layers['nsl'+2].top = cy;document.layers['nsl'+2].left = cx;document.layers['nsl'+3].top = Dy;document.layers['nsl'+3].left = Dx;document.layers['nsl'+4].top = Ey;document.layers['nsl'+4].left = Ex;}else if (document.all) {outer.style.pixelTop = document.body.scrollTop;text[0].style.pixelTop = ay;text[0].style.pixelLeft = ax;text[1].style.pixelTop = by;text[1].style.pixelLeft = bx;text[2].style.pixelTop = cy;text[2].style.pixelLeft = cx;text[3].style.pixelTop = Dy;text[3].style.pixelLeft = Dx;text[4].style.pixelTop = Ey;text[4].style.pixelLeft = Ex;}}function move() {ey = Ey += (ypos - Ey) * 0.2;ex = Ex += (xpos - Ex) * 0.2;dy = Dy += (ey - Dy) * 0.3;dx = Dx += (ex - Dx) * 0.3;cy = Cy += (dy - Cy) * 0.4;cx = Cx += (dx - Cx) * 0.4;by = By += (cy - By) * 0.5;bx = Bx += (cx - Bx) * 0.5;ay = Ay += (by - Ay) * 0.6;ax = Ax += (bx - Ax) * 0.6;makefollow();setTimeout('move()', 100);}window.onload=move;// End -->