gistfile1.js

/**  
 *  1. 打开百姓网首页，http://www.baixing.com
 *  2. 把下面这段代码复制到控制台并运行(需要chrome :D)，
 *  3. 然后鼠标移动到 LOGO 上可以看到效果
 */

(function() {

  if (!document.createElement('canvas').getContext) return false;

  var logo = document.getElementsByTagName('h1')[0];
  if (logo && !(logo = logo.getElementsByTagName('img')[0])) return false;

  var img = new Image();
  img.src = logo && logo.getAttribute('src');

  img.onload = function() {
    var wrapper = createWrapper(img.width, img.height);
    var canvas = createCanvas(img.width, img.height);
    var mask = createMask(img.width, 14);
    var offsets = getOffsets();
    var circles = [];

    canvas.context.drawImage(img, 0, 0, img.width, img.height);      
    for (var i = 0; i < offsets.length; ++i) {
      wrapper.appendChild(
        circles[circles.length] = getCircle(canvas.self, offsets[i])
      );
    }

    wrapper.appendChild(canvas.self);
    wrapper.appendChild(mask);
    logo.parentNode.appendChild(wrapper);
    logo.parentNode.removeChild(logo);

    wrapper.onmouseover = function() {
      for (var i = 0; i < 5; ++i ) {
        circles[i].style.top = ['-2px', '5px', '-4px', '4px', '-1px'][i];
      }
    }
    wrapper.onmouseout = function() {
      for (var i = 0; i < 5; ++i ) {
        circles[i].style.top = offsets[i].y + 'px';
      }
    }
  }

  function createCanvas(width, height) {
    var c = document.createElement('canvas');
    c.width = width;
    c.height = height;
    c.style.position = 'absolute';
    c.style.left = 0;
    c.style.zIndex = -1;
    c.style.top = 0;
    return {
      self: c,
      context: c.getContext('2d')
    }
  }

  function createWrapper(width, height) {
    var w = document.createElement('span');
    w.style.display = 'inline-block';
    w.style.position = 'relative';
    w.style.width = +width + 'px'
    w.style.height = +height + 'px'
    return w;
  }

  function createMask(width, height) {
    var m = document.createElement('span');
    m.style.display = 'inline-block';
    m.style.position = 'absolute';
    m.style.width = +width + 'px';
    m.style.height = +height + 'px';
    m.style.background = '#fff';
    m.style.zIndex = 1;
    m.style.top = 0;
    m.style.left = 0; 
    return m; 
  }

  function getCircle(origin, offset) {
    var c = document.createElement('canvas');
    var ctx = c.getContext('2d');
    c.width = c.height= offset.x1 - offset.x;
    c.style.position = 'absolute';
    c.style.left = offset.x + 'px';
    c.style.top = offset.y + 'px';
    c.style.zIndex = 2;
    c.style['-webkit-transition'] = 'all ' + (Math.random() + .4) +'s ease';
    ctx.drawImage(origin, -offset.x, -offset.y);
    return c;
  }

  function getOffsets() {
    return [
      {x: 18, x1: 26, y: 4, y1: 14},
      {x: 30, x1: 38, y: 0, y1: 14},
      {x: 42, x1: 50, y: 6, y1: 14},
      {x: 54, x1: 62, y: 1, y1: 14},
      {x: 66, x1: 74, y: 3, y1: 14} 
    ];
  }

}());