macdock.html
<html>
<head>
<title>Mac Menu</title>
<script src="js/pro.js" type="text/javascript"></script>
<style>
#menuBar{ width: 100%; text-align: center; position: relative; }
#menuitems { text-align: center; margin-left: auto; margin-right: auto; width: 200px; }
.menuitem { vertical-align: top; display: inline; background-color: #f00; }
.menuitem img { vertical-align: top; width: 20px; height: 20px; border: 0px; }
#logDiv { font-size: 10px; }
</style>
</head>
<body>
<div id="menubar">
<div id="menuitems">
<div class="menuitem"><img οnclick="alert(this.id);" src="test2.jpg" id="img1"></div>
<div class="menuitem"><img οnclick="alert(this.id);" src="test2.jpg" id="img2"></div>
<div class="menuitem"><img οnclick="alert(this.id);" src="test2.jpg" id="img3"></div>
<div class="menuitem"><img οnclick="alert(this.id);" src="test2.jpg" id="img4"></div>
<div class="menuitem"><img οnclick="alert(this.id);" src="test2.jpg" id="img5"></div>
<div class="menuitem"><img οnclick="alert(this.id);" src="test2.jpg" id="img6"></div>
</div>
</div>
<div id="position"></div>
<div id="logDiv"></div>
</body>
</html>pro.js
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);
});