Mac Menu effect js

Gne (Paolo) — Tue, 25 Sep 2007 10:48:19 GMT

Here the html code

JS

and the javascript, require prototypejs



var maxDist = 0;



function mousemove(e) {

	var eX = Position.page($('menuitems'))[0];

	var eY = Position.page($('menuitems'))[1];

	var eWidth = parseInt($('menuitems').getStyle('width'));

	var pX = Event.pointerX(e);

	var pY = Event.pointerY(e);

	var imgs = $('menuitems').immediateDescendants();

	for (var i = 0; i < imgs.length; i++) {

		var distFromMouse = calcDistFromMouse(pX, pY, imgs[i].firstDescendant());

		if (distFromMouse < 45) {

			var newSize = parseInt(distFromMouse * (-0.4) + 50);

			imgs[i].firstDescendant().setStyle({ width: newSize, height: newSize});

		} else {

			imgs[i].firstDescendant().setStyle({ width: 20, height: 20});

		}

	}

}



function resetScaling () {

	var imgs = $('menuitems').immediateDescendants();

	for (var i = 0; i < imgs.length; i++) {

		var newSize = 20;

		imgs[i].setStyle({ width: newSize, height: newSize});

	}

}



function calcDistFromMouse(mX, mY, elem) {

	var elemCenterX = parseInt(Position.page(elem)[0]) + (parseInt(elem.getStyle('width')) / 2);

	var elemCenterY = parseInt(Position.page(elem)[1]) + (parseInt(elem.getStyle('height')) / 2);

	var distance = parseInt(Math.sqrt((elemCenterX - mX) * (elemCenterX - mX) + (elemCenterY - mY) * (elemCenterY - mY)));

	return distance;

}



function checkMousePos(pX, pY, eX, eY, eWidth ){

	if (pY - eY > 200)

		return false;

	if (pX > eX) {

		if (pX - (eX + eWidth) > 200)

			return false;

	} else {

		if (eX - pX > 200)

			return false;

	}

	return true;

}



Event.observe(window,'load', function() {

  Event.observe(document,'mousemove',mousemove, false);

});

DZone Snippets: prototype code

Mac Menu effect js