Js makes small eyes on google websites

I thought it would be quite difficult before I did not look at it. Today I read others' ideas, so I found myself confused. I feel that this is not practical, but it can be decorated by hanging it on a blog or something, but it is mainly used to practice js and improve my programming capability ~. When writing, it is easier to draw a graph and analyze and write it. In addition, it is the use of some junior high school mathematics knowledge ......

Please check the Demo first

Source code:

Html:

<div id="googleEye">
Css:
body {background-color: #888;}#googleEye {background-color: #FFF;width: 324px;margin: 1em auto;padding-bottom: 1em;border: 1px solid #E1ECFE;text-align: center;vertical-align: middle;}#googleEye h1 {line-height: 30px;background-color: #E1ECFE;font-size: 16px;text-align: center;margin: 0 0 1em;padding: 0;}#googleEye div {display: inline-block;_display: inline;_zoom: 1;width: 117px;height: 117px;position: relative;}#leftEye {background: url(images/eye-r.gif) no-repeat center;}#rightEye {background: url(images/eye-y.gif) no-repeat center;}#googleEye div img {position: absolute;left: 51px;top: 51px;width: auto;}
Js:
Function $ (id) {return document. getElementById (id);} function addEvent (obj, type, handler) {if (obj. addEventListener) {obj. addEventListener (type, handler, false);} else if (obj. attachEvent) {obj. attachEvent ('on' + type, handler);} else {obj ['on' + type] = handler ;}} (function () {addEvent (window, 'load ', initAll); addEvent (document, "mousemove", function (event) {GEye. init (event. clientX, event. clientY) ;}); function initAll () {var gEye1 = new GEye ($ ('lefteye '); var gEye2 = new GEye ($ ('righteye '));} function GEye (eye) {this. eye = eye; this. pupil = eye. getElementsByTagName ('img ') [0]; GEye. eyes. push (this);} GEye. eyes = []; GEye. eyeRadius = 58; // eye radius GEye. pupilRadius = 7; // pupil radius GEye. pupilRange = 41; // Pupil activity range GEye. getHypotenuse = function (h, v) {// returns Math for the length of the diagonal side of a right triangle. sqrt (Math. pow (h, 2) + Math. pow (v, 2);} GEye. init = function (x, y) {for (var I = 0; I <this. eyes. length; I ++) {this. eyes [I]. draw (x, y) ;};} GEye. prototype = {setPos: function (left, top) {this. pupil. style. left = left + 'px '; this. pupil. style. top = top + 'px ';}, setAngle: function (sin, cos) {var left = GEye. eyeRadius-cos * GEye. pupilRange-GEye. pupilRadius; var top = GEye. eyeRadius-sin * GEye. pupilRange-GEye. pupilRadius; this. setPos (left, top) ;}, getCenter: function () {// returns {X: this. eye. offsetLeft + GEye. eyeRadius, Y: this. eye. offsetTop + GEye. eyeRadius };}, draw: function (mouseX, mouseY) {var center = this. getCenter (); var len = GEye. getHypotenuse (center. x-mouseX, center. y-mouseY); // The distance from the mouse vertex to the center of the eye if (len> GEye. pupilRange) {// var sin = (center. y-mouseY)/len; var cos = (center. x-mouseX)/len; this. setAngle (sin, cos);} else {// var left = mouseX-this in the eyes. eye. offsetLeft-GEye. pupilRadius; var top = mouseY-this. eye. offsetTop-GEye. pupilRadius; this. setPos (left, top );};}}})();
I have been studying js recently, and I often read articles from my school friends through cnblogs. It is very helpful. Thank you for sharing it.