苹果系统的Dock，很像很Cool
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"><imgsrc="test2.jpg" id="img1"></div><div class="menuitem"><imgsrc="test2.jpg" id="img2"></div><div class="menuitem"><imgsrc="test2.jpg" id="img3"></div><div class="menuitem"><imgsrc="test2.jpg" id="img4"></div><div class="menuitem"><imgsrc="test2.jpg" id="img5"></div><div class="menuitem"><imgsrc="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'));var eY = Position.page($('menuitems'));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.firstDescendant());if (distFromMouse < 45) {var newSize = parseInt(distFromMouse * (-0.4) + 50);imgs.firstDescendant().setStyle({ width: newSize, height: newSize});} else {imgs.firstDescendant().setStyle({ width: 20, height: 20});}}}function resetScaling () {var imgs = $('menuitems').immediateDescendants();for (var i = 0; i < imgs.length; i++) {var newSize = 20;imgs.setStyle({ width: newSize, height: newSize});}}function calcDistFromMouse(mX, mY, elem) {var elemCenterX = parseInt(Position.page(elem)) + (parseInt(elem.getStyle('width')) / 2);var elemCenterY = parseInt(Position.page(elem)) + (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);});
页:
[1]