淡入鼠标移动 [英] Fade in on mouse movement

问题描述

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

How do I fade in div content on first mouse movement, like on google.com, using JavaScript? I don't want it to fade out again.

推荐答案

代码：（看到它在行动）

Code: (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 );
};

注意：淡入淡出功能可能会更小，但在此表格，您可以轻松地重复使用任何元素和持续时间。玩得开心！

Note: the fade function could've been smaller, but in this form you can reuse it easily for any element and duration. Have fun!

这篇关于淡入鼠标移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！