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 to calculate Pi
Learn how to calculate base 10 logarithms in your head
Learn to make a OSX-style fisheye menu in JavaScript
Learn how to make switch statements in Python
Learn how to convert a recursive function into an explicit function
 
14 Cresco 11:2
19.7.10
?
© 2014 Nerd Paradise