Mac Menu effect js
Here the html code
and the javascript, require prototypejs
1 2 <html> 3 <head> 4 <title>JS</title> 5 <script src="js/prototype.js" type="text/javascript"></script> 6 <script src="fisheye_new_2.js" type="text/javascript"></script> 7 <style> 8 #menuBar{ width: 100%; text-align: center; position: relative; } 9 #menuitems { text-align: center; margin-left: auto; margin-right: auto; width: 200px; } 10 .menuitem { vertical-align: top; display: inline; background-color: #f00; } 11 .menuitem img { vertical-align: top; width: 20px; height: 20px; border: 0px; } 12 #logDiv { font-size: 10px; } 13 </style> 14 </head> 15 <body> 16 <div id="menubar"> 17 <div id="menuitems"> 18 <div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img1"></div> 19 <div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img2"></div> 20 <div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img3"></div> 21 <div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img4"></div> 22 <div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img5"></div> 23 <div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img6"></div> 24 </div> 25 </div> 26 <div id="position"></div> 27 <div id="logDiv"></div> 28 </body> 29 </html>
and the javascript, require prototypejs
1 2 var maxDist = 0; 3 4 function mousemove(e) { 5 var eX = Position.page($('menuitems'))[0]; 6 var eY = Position.page($('menuitems'))[1]; 7 var eWidth = parseInt($('menuitems').getStyle('width')); 8 var pX = Event.pointerX(e); 9 var pY = Event.pointerY(e); 10 var imgs = $('menuitems').immediateDescendants(); 11 for (var i = 0; i < imgs.length; i++) { 12 var distFromMouse = calcDistFromMouse(pX, pY, imgs[i].firstDescendant()); 13 if (distFromMouse < 45) { 14 var newSize = parseInt(distFromMouse * (-0.4) + 50); 15 imgs[i].firstDescendant().setStyle({ width: newSize, height: newSize}); 16 } else { 17 imgs[i].firstDescendant().setStyle({ width: 20, height: 20}); 18 } 19 } 20 } 21 22 function resetScaling () { 23 var imgs = $('menuitems').immediateDescendants(); 24 for (var i = 0; i < imgs.length; i++) { 25 var newSize = 20; 26 imgs[i].setStyle({ width: newSize, height: newSize}); 27 } 28 } 29 30 function calcDistFromMouse(mX, mY, elem) { 31 var elemCenterX = parseInt(Position.page(elem)[0]) + (parseInt(elem.getStyle('width')) / 2); 32 var elemCenterY = parseInt(Position.page(elem)[1]) + (parseInt(elem.getStyle('height')) / 2); 33 var distance = parseInt(Math.sqrt((elemCenterX - mX) * (elemCenterX - mX) + (elemCenterY - mY) * (elemCenterY - mY))); 34 return distance; 35 } 36 37 function checkMousePos(pX, pY, eX, eY, eWidth ){ 38 if (pY - eY > 200) 39 return false; 40 if (pX > eX) { 41 if (pX - (eX + eWidth) > 200) 42 return false; 43 } else { 44 if (eX - pX > 200) 45 return false; 46 } 47 return true; 48 } 49 50 Event.observe(window,'load', function() { 51 Event.observe(document,'mousemove',mousemove, false); 52 });
