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)); = value + "px"; = 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.

What are you doing surfing the internet all alone? You can find some friends in our Forum.
Other Articles
Tetris in QBASIC
Learn how to fall asleep more reliably
Learn how to solve a Square-1
Learn how to calculate base 10 logarithms in your head
Learn how computers make random numbers
15 Vigeo 2:5
© 2015 Nerd Paradise