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 solve a Square-1
Learn how to calculate the square root of a number without a calculator
Learn how to compile your code in a language that isn't traditionally compiled
Learn LaTeX
Learn how to make a video game in Python
 
14 Vigeo 1:4
8.55.16
?
© 2014 Nerd Paradise