javascript - 淡入鼠标移动

Question

如何使用 JavaScript 在鼠标第一次移动时淡入 div 内容，例如在 google.com 上？我不希望它再次淡出。

Answer 1

代码:(See it in action)

// attach event handler
document.body.onmousemove = function(){
  fadeIn( this, 1000 );      // 1000ms -> 1s
  this.onmousemove = null; // remove to only fade in once!
};

// sets the opacity of an element (x-browser)
function setOpacity( obj, value ) {
  if ( obj ) {
    obj.style.opacity = value / 100;
    obj.style.filter  = 'alpha(opacity=' + value + ')';
    obj.style.zoom    = 1;
  }
}

// makes an element to fade in
function fadeIn( dom, interval, delay ) {

      interval  = interval || 1000;
      delay     = delay    || 10;

  var opacity   = 0,
      start     = Number(new Date()),
      op_per_ms =  100 / interval;

  if ( typeof dom === "string" ) {
    dom = document.getElementById( dom );
  }

  function step() {

    var now     = Number(new Date()),
        elapsed = now - start;
        opacity = elapsed * op_per_ms;

    setOpacity( dom, opacity );

    if ( elapsed < interval )
      setTimeout( step, delay );
    else
      setOpacity( dom, 100 );
  }

  setTimeout( step, delay );
};

注意:淡入淡出函数本来可以更小，但在这种形式下，您可以轻松地为任何元素和持续时间重用它。玩得开心!