Анимация глаз на Javascript
Всем привет! Мне жужно на Javascript написать программу, которая бы анимировала покадрово движение глаза. Программу я написал, но она почему то не работает. Если есть ошибки подскажите буду благодарен!
Вот текст программы: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> </head> <body> <script type="text/javascript"> function eyesmove(x,y) { var ex, ey, dx, dy; if(leftEye && rightEye) { ex=eyeso.offsetLeft+46; ey=eyeso.offsetTop+58; dx=x-ex; dy=y-ey; var eyel=getEyeballPosition(dx,dy); leftEye.src='Position/Left'+eye1+'.png'; ex+=56; dx-=56; var eye2=getEyeballPosition(dx,dy); rightEye.src='Position/Right/'+eye2+'.png'; } } function getEyeballPosition(xm,ym) { var r, xr, yr; r=Math.sqrt(xm*xm+ym*ym); xr=x/r; yr=y/r; if(r<=20)return "pupilcenter"; if(yr>=0.92388) return "pupildown"; if(yr<=-0.92388) return "pupilup"; if(xr>=0.92388) return "pupilcenterright"; if(xr<=-0.92388) return "pupilcenterleft"; if((yr<0) && (xr>0)) return "pupilupright"; if((yr<0) && (xr<0)) return "pupilupleft"; if((yr>0) && (xr<0)) return "pupildownleft"; if((yr>0) && (xr>0)) return "pupildownright"; } function eyes(x,y) { eye1=document.getElementById('eye1'); eye2=document.getElementById('eye2'); document.onmousemove=eyesmousemove(); } function eyesmousemove(e) { var mousex=(e)? e.pageX : event.clientX+standardbody.scrollLeft; var mousey=(e)? e.pageY : event.clientY+standardbody.scrollTop; eyesmove(mousex,mousey); } </script> <div id='list' style="position:absolute; top:40px; left:800px;"> </div> <div style="position: absolute; top: 550px; left: 345px;"> <input type="button" value="Top of the list" style="font-size:20px" onclick="flag='top'; spisok()" /> </div> <div style="position: absolute; top: 550px; left: 495px;"> <input type="button" value="Bottom of the list" style="font-size:20px" onclick="flag='bottom'; spisok()"/> </div> <div style="position: absolute; top: 550px; left: 670px;"> <input type="reset" value="Reset" style="font-size:20px" onClick='window.location.reload()' /> </div> <div id="image1" style="margin:0; padding:0; position:absolute; left:450px; top:200px; width:220px; height:160px; text-align:left;z-index:1;"> <h2 id="Name" style="text-align:left"> </h2> <div id="eye1" style="position: absolute;left: 20;top: 50;z-index: 2;width: 40;height: 38"> <img id="leftEye" src="pupil.Position/Left Eye/puppilcenter" width="40" height="38" /> </div> </div> <div id="Text1" style="margin: 0; padding: 0; position: absolute; left: 60px; top: 35px; width: 250px; height: 16px; text-align: left; z-index: 3;"> <font style="font-size:20px;font-weight:bold" color="blue" face="Arial">Choose a Pet Rahhhks! </font> </div> <div id="Text2" style="margin: 0; padding: 0; position: absolute; left: 363px; top: 36px; width: 350px; height: 16px; text-align: left; z-index: 4;"> <font style="font-size:20px;font-weight:bold" color="red" face="Arial">Pick a name for your Pet Rahhhks!</font></div> <div id="Text3" style="margin: 0; padding: 0; position: absolute; left: 500px; top: 350px; width: 60px; height: 15px; text-align: left;z-index:2;"> <font style="font-size:16px;" color="green"> </font> </div> </body> </html> </body> </html> |
Ээ, так не пойдет. оберни хотябы в тег [ HTML ][ /HTML ]
А еще лучше - jsfiddle.net |
Часовой пояс GMT +3, время: 09:42. |