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.

Now that you've finished reading this post, what are you going do? You should go join the Forum.
Other Articles
Tetris in QBASIC
Learn the longest words in the English language
Learn how to make a game loop in Silverlight
Learn Python in 4 minutes
Learn how to obfuscate your large python program into 1 line
 
14 Cresco 5:2
4.48.77
?
© 2014 Nerd Paradise