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
Learn XHTML and CSS
Learn ancient world history in 5 minutes
Learn how to compile your code in a language that isn't traditionally compiled
Learn JavaScript
Learn Python from scratch
 
14 Ineo 4:0
18.26.82
?
© 2014 Nerd Paradise