Dateigrösse: 7.26 kb
1 /* Fisheye Menu v1.0 2 Written by Marc Grabanski (m@marcgrabanski.com) 3 4 Copyright (c) 2007 Marc Grabanski (http://marcgrabanski.com/code/fisheye-menu) 5 Date: 10-05-2007 6 XTD and improoved by mike sasso 11-10-2011 */ 7 var Browser = { 8 'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0, 9 'isOpera' : navigator.userAgent.indexOf('Opera') >= 0, 10 'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && 11 (navigator.userAgent.indexOf('Opera') < 0) 12 }; 13 14 /* 15 */ 16 var fisheyemenu = { 17 startSize : 16, 18 endSize : 32, 19 imgType : ".png", 20 init : function () { 21 var listElements = document.getElementById("fisheye_menu").getElementsByTagName("li"); 22 var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img"); 23 var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span"); 24 25 for(var j=0; j< titleElements.length; j++) { 26 titleElements[j].style.display = 'none'; 27 } 28 29 for(var j=0; j< animElements.length; j++) { 30 if(j%2) { 31 //alert(animElements[j].src); 32 animElements[j].style.display = 'none'; 33 } else { 34 animElements[j].style.width = fisheyemenu.startSize+'px'; 35 animElements[j].style.height = fisheyemenu.startSize+'px'; 36 fisheyemenu.imgSmall(animElements[j]); 37 } 38 } 39 40 for(var i=0; i< listElements.length; i++) { 41 listElements[i].onmouseover = changeSize; 42 listElements[i].onmouseout = restoreSize; 43 } 44 45 function changeSize() { 46 var imgS = this.getElementsByTagName("img")[0]; 47 var imgL = this.getElementsByTagName("img")[1]; 48 var span = this.getElementsByTagName("span")[0]; 49 span.style.display = 'block'; 50 imgS.style.display = 'none'; 51 imgL.style.display = 'block'; 52 fisheyemenu.imgLarge(imgL); 53 if (!imgS.currentWidth) imgS.currentWidth = fisheyemenu.startSize; 54 fisheyemenu.resizeAnimation(imgL, imgS.currentWidth, fisheyemenu.endSize, 15, 10, 0.333); 55 } 56 57 function restoreSize() { 58 var imgS = this.getElementsByTagName("img")[0]; 59 var imgL = this.getElementsByTagName("img")[1]; 60 var span = this.getElementsByTagName("span")[0]; 61 span.style.display = 'none'; 62 imgS.style.display = 'block'; 63 imgL.style.display = 'none'; 64 fisheyemenu.imgSmall(imgS); 65 if (!imgL.currentWidth) imgL.currentWidth = fisheyemenu.endSize; 66 fisheyemenu.resizeAnimation(imgS, imgL.currentWidth, fisheyemenu.startSize, 15, 10, 0.666); 67 } 68 }, 69 resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) { 70 if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt); 71 var actStep = 0; 72 elem.widthChangeMemInt = window.setInterval( 73 function() { 74 elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr); 75 elem.style.width = elem.currentWidth+"px"; 76 elem.style.height = elem.currentWidth+"px"; 77 actStep++; 78 if (actStep > steps) window.clearInterval(elem.widthChangeMemInt); 79 } 80 ,intervals) 81 }, 82 easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) { 83 //Generic Animation Step Value Generator By www.hesido.com 84 var delta = maxValue - minValue; 85 var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta); 86 return Math.ceil(stepp) 87 }, 88 imgSmall : function (obj) { 89 if(Browser.isFirefox) 90 obj.style.MozOpacity=0.5; 91 }, 92 imgLarge : function (obj) { 93 if(Browser.isFirefox) 94 obj.style.MozOpacity=0.75; 95 } 96 } 97 98 var fisheyemenuXTD = { 99 startSize : 32, 100 endSize : 256, 101 imgType : ".png", 102 init : function () { 103 var listElements = document.getElementById("ffisheye_menu").getElementsByTagName("li"); 104 var animElements = document.getElementById("ffisheye_menu").getElementsByTagName("img"); 105 var titleElements = document.getElementById("ffisheye_menu").getElementsByTagName("span"); 106 107 for(var j=0; j< titleElements.length; j++) { 108 titleElements[j].style.display = 'none'; 109 } 110 111 for(var j=0; j< animElements.length; j++) { 112 if(j%2) { 113 //alert(animElements[j].src); 114 animElements[j].style.display = 'none'; 115 } else { 116 animElements[j].style.width = fisheyemenuXTD.startSize+'px'; 117 animElements[j].style.height = fisheyemenuXTD.startSize+'px'; 118 fisheyemenuXTD.imgSmall(animElements[j]); 119 } 120 } 121 122 for(var i=0; i< listElements.length; i++) { 123 listElements[i].onmouseover = changeSize; 124 listElements[i].onmouseout = restoreSize; 125 } 126 127 function changeSize() { 128 var imgS = this.getElementsByTagName("img")[0]; 129 var imgL = this.getElementsByTagName("img")[1]; 130 var span = this.getElementsByTagName("span")[0]; 131 span.style.display = 'block'; 132 imgS.style.display = 'none'; 133 imgL.style.display = 'block'; 134 fisheyemenuXTD.imgLarge(imgL); 135 if (!imgS.currentWidth) imgS.currentWidth = fisheyemenuXTD.startSize; 136 fisheyemenuXTD.resizeAnimation(imgL, imgS.currentWidth, fisheyemenuXTD.endSize, 15, 10, 0.333); 137 } 138 139 function restoreSize() { 140 var imgS = this.getElementsByTagName("img")[0]; 141 var imgL = this.getElementsByTagName("img")[1]; 142 var span = this.getElementsByTagName("span")[0]; 143 span.style.display = 'none'; 144 imgS.style.display = 'block'; 145 imgL.style.display = 'none'; 146 fisheyemenuXTD.imgSmall(imgS); 147 if (!imgL.currentWidth) imgL.currentWidth = fisheyemenuXTD.endSize; 148 fisheyemenuXTD.resizeAnimation(imgS, imgL.currentWidth, fisheyemenuXTD.startSize, 15, 10, 0.666); 149 } 150 }, 151 resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) { 152 if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt); 153 var actStep = 0; 154 elem.widthChangeMemInt = window.setInterval( 155 function() { 156 elem.currentWidth = fisheyemenuXTD.easeInOut(startWidth,endWidth,steps,actStep,powr); 157 elem.style.width = elem.currentWidth+"px"; 158 elem.style.height = elem.currentWidth+"px"; 159 actStep++; 160 if (actStep > steps) window.clearInterval(elem.widthChangeMemInt); 161 } 162 ,intervals) 163 }, 164 easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) { 165 //Generic Animation Step Value Generator By www.hesido.com 166 var delta = maxValue - minValue; 167 var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta); 168 return Math.ceil(stepp) 169 }, 170 imgSmall : function (obj) { 171 if(Browser.isFirefox) 172 obj.style.MozOpacity=0.5; 173 }, 174 imgLarge : function (obj) { 175 if(Browser.isFirefox) 176 obj.style.MozOpacity=0.75; 177 } 178 } 179 180 181 /* Add event with wide browser support 182 if ( typeof window.addEventListener != "undefined" ) { 183 window.addEventListener( "load", fisheyemenu.init, false ); 184 } 185 else if ( typeof window.attachEvent != "undefined" ) { 186 window.attachEvent( "onload", fisheyemenu.init ); 187 } else { 188 if ( window.onload != null ) { 189 var oldOnload = window.onload; 190 window.onload = function ( e ) { 191 oldOnload( e ); 192 fisheyemenu.init(); 193 }; 194 } else { 195 window.onload = fisheyemenu.init; 196 } 197 } 198 */ 199