Mac Dock Effects in JavaScript

Fri, Mar 7

How cool is this? Thanks to Stephen Morley you can create the Mac OS X dock effect of icons expanding as you mouse over them using JavaScript. In the range of 130 lines of code, Stephen has crammed some serious image processing code. To fully appreciate this, you have to visit the demo page.

Here is a screenshot of the effect (taken from the demo page):

The script works by scaling a range of images. For example, to create the effect above, two images are used, one for each icon. One image is 32×32 pixels, the other is 64×64 pixels. The code below shows you how the scaling is managed (obviously, understanding all this is a little challenging without the full context, however, interesting nonetheless).

   function processMouseMove(e){
    if (!e) e = window.event;
    var target = e.target || e.srcElement;
    var index = 0;
    window.clearTimeout(closeTimeout);
    closeTimeout = null;
    window.clearInterval(closeInterval);
    closeInterval = null;
    if (scale != 1 && !openInterval){
      openInterval = window.setInterval(
          function(){
            if (scale < 1) scale += 0.125;
            if (scale >= 1){
              scale = 1;
              window.clearInterval(openInterval);
              openInterval = null;
            }
            for (var i = 0; i < imageNodes.length; i++){
              setImageProperties(i);
            }
          },
          20);
    }
    while (imageNodes[index] != target) index++;
    var across = (e.layerX || e.offsetX) / imageSizes[index];
    if (across){
      for (var i = 0; i < imageSizes.length; i++){
        if ((i < index - range) || (i > index + range)){
          imageSizes[i] = minimumSize;
        }else{
          imageSizes[i] = minimumSize
                        + Math.ceil((maximumSize - minimumSize)
                            * (Math.cos(i - index - across + 0.5) + 1) / 2);
        }
        setImageProperties(i);
      }
    }
  }

The script is quite flexible in that you can specify/include a range of images sizes, which I assume would allow for a better “expanding” effect, and at the same time provide help for the scaling challenged (think Windows).

This is a really cool use of JavaScript, nice work Stephen!

2 comments

Cool, thanks :)

by fedmich on Mar 10, 2008. Reply #

its really nice to use………. amazing……….

by sekar on Jun 12, 2008. Reply #

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>