1 /*! |
|
2 * Fisheye Menu |
|
3 * Copyright 2007-2009 Marc Grabanski (m@marcgrabanski.com) http://marcgrabanski.com |
|
4 * Project Page: http://marcgrabanski.com/pages/code/fisheye-menu |
|
5 * Under the MIT License */ |
|
6 |
|
7 var fisheyemenu = { |
|
8 startSize : 55, |
|
9 endSize : 88, |
|
10 imgType : ".gif", |
|
11 init : function () { |
|
12 var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img"); |
|
13 var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span"); |
|
14 for(var j=0; j<titleElements.length; j++) { |
|
15 titleElements[j].style.display = 'none'; |
|
16 } |
|
17 for(var i=0; i<animElements.length; i++) { |
|
18 var y = animElements[i]; |
|
19 y.style.width = fisheyemenu.startSize+'px'; |
|
20 y.style.height = fisheyemenu.startSize+'px'; |
|
21 fisheyemenu.imgSmall(y); |
|
22 animElements[i].onmouseover = changeSize; |
|
23 animElements[i].onmouseout = restoreSize; |
|
24 } |
|
25 function changeSize() { |
|
26 fisheyemenu.imgLarge(this); |
|
27 var x = this.parentNode.getElementsByTagName("span"); |
|
28 x[0].style.display = 'block'; |
|
29 if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize; |
|
30 fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333); |
|
31 } |
|
32 function restoreSize() { |
|
33 var x = this.parentNode.getElementsByTagName("span"); |
|
34 x[0].style.display = 'none'; |
|
35 if (!this.currentWidth) return; |
|
36 fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5); |
|
37 fisheyemenu.imgSmall(this); |
|
38 } |
|
39 }, |
|
40 resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) { |
|
41 if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt); |
|
42 var actStep = 0; |
|
43 elem.widthChangeMemInt = window.setInterval( |
|
44 function() { |
|
45 elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr); |
|
46 elem.style.width = elem.currentWidth+"px"; |
|
47 elem.style.height = elem.currentWidth+"px"; |
|
48 actStep++; |
|
49 if (actStep > steps) window.clearInterval(elem.widthChangeMemInt); |
|
50 } |
|
51 ,intervals) |
|
52 }, |
|
53 easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) { |
|
54 //Generic Animation Step Value Generator By www.hesido.com |
|
55 var delta = maxValue - minValue; |
|
56 var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta); |
|
57 return Math.ceil(stepp) |
|
58 }, |
|
59 imgSmall : function (obj) { |
|
60 imgSrc = obj.getAttribute("src"); |
|
61 var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0); |
|
62 var imgName = imgSrc.substr(0, typePos); |
|
63 obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType); |
|
64 }, |
|
65 imgLarge : function (obj) { |
|
66 imgSrc = obj.getAttribute("src"); |
|
67 var typePos = imgSrc.indexOf("_small", 0); |
|
68 var imgName = imgSrc.substr(0, typePos); |
|
69 obj.setAttribute("src", imgName+fisheyemenu.imgType); |
|
70 } |
|
71 } |
|
72 |
|
73 // Add event with wide browser support |
|
74 if ( typeof window.addEventListener != "undefined" ) |
|
75 window.addEventListener( "load", fisheyemenu.init, false ); |
|
76 else if ( typeof window.attachEvent != "undefined" ) |
|
77 window.attachEvent( "onload", fisheyemenu.init ); |
|
78 else { |
|
79 if ( window.onload != null ) { |
|
80 var oldOnload = window.onload; |
|
81 window.onload = function ( e ) { |
|
82 oldOnload( e ); |
|
83 fisheyemenu.init(); |
|
84 }; |
|
85 } |
|
86 else |
|
87 window.onload = fisheyemenu.init; |
|
88 } |
|