Blake O'Hare
Log In     Register     Nerdity Test     Forum
Nerd Paradise
 
Author: Blake

Fish Eye Menu in JavaScript

When I posted yesterday about how to find mouse coordinates, I was actually working on this and figured the intermediate step could have been useful to many people. So, using the mouse coordinates within a div filled with images, I scale the images based on an equation I created in terms of the x-coordinate of the cursor within the div tag. The div is 700 pixels, has 9 icons in it and has 2 invisible spacer images on the ends that are 50 pixels wide. The code of actual interest is this:

function setScale(xpos)
{
	var locations = [0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5];
	
	for (var i = 0; i < 9; ++i)
	{
		// There are a few methods to my madness here, but this is mostly just 
		// calibration of trial and error to get it to "feel right"
		var value = Math.floor(25 * Math.max(0,2 - Math.abs(((xpos - 104) * 1.2445
			+ 37) / 700 * 9 - locations[i])) + 51);
		var image = document.getElementById("icon" + (i + 1));
		image.style.width = value + "px";
		image.style.height = value + "px";
		
	}
}

The x-coordinate is, of course, retrieved using the code from yesterday's post. For the full code, simply look at the well-formated source for this page.

You should join our Forum. It's loads of fun!
Other Articles
Learn how to make a game loop in Silverlight
Learn how to calculate base 10 logarithms in your head
Learn how to fall asleep more reliably
Learn what's in Mountain Dew and what it does to your body
Learn XHTML and CSS
 
14 Cresco 6:2
4.59.23
?
© 2014 Nerd Paradise