Question

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

Answer 1

// 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 );
};

注意：淡入淡出功能可能会更小，但在这种形式下，您可以轻松地将其重复用于任何元素和持续时间。玩得开心！

Answer 2

如果你使用jquery并希望它像google一样淡入淡出你可以做这样的事情

$('body').mousemove(function() {
  $('#content').fadeIn();
});

Answer 3

您可以使用以下代码为Google创建淡入淡出效果。请注意，这将具有与Google类似的功能。您可以将此技术应用于具有适当事件处理程序的任何元素。

var fps = 24;
var mpf = 1000 / fps;

function fadeIn(ele, mils) {
    // ele: id of document to change.
    // mils: number of mils for the tansition.
    var whole = 0;
    var milsCount = 0;
    var subRatio = 1 / (mils / mpf);

    while (milsCount <= mils) {
        setTimeout('setOpacity("' + ele + '", ' + whole + ')', milsCount);
        whole += subRatio;
        milsCount += mpf;
    }

    // removes the event handler.
    document.getElementById(ele).onmouseover = "";
}

function setOpacity(ele, value) {
    ele = document.getElementById(ele);

    // Set both accepted values. They will ignore the one they do not need.
    ele.style.opacity = value;
    ele.style.filter = "alpha(opacity=" + (value * 100) + ")";
}

您需要以通常的方式将事件处理程序添加到文档正文中。如果您决定使用不接受参数的附件方法，请务必修改fadeIn函数以从target / srcElement中提取信息。或者，您可以将所需的值和对象硬编码到函数中：

<强>内联

<body id="theBody" onmouseover="fadeIn('theBody', 1500)">

DOM级别0：

document.getElementByTagName("body")[0].onmouseover = function(){ code here };
document.getElementByTagName("body")[0].onmouseover = fadeIn;

DOM级别2：

document.getElementByTagName("body")[0].addEventListener("mouseover", fadeIn);
document.getElementByTagName("body")[0].attachEvent('onclick', fadeIn);

您还需要为body元素设置一个css规则，以确保在页面加载时它不可见：

body {
    opacity: 0;
    filter:alpha(opacity=0);
}

我已检查此代码，以便在IE8，Chrome，Safari，FireFox和Opera上正常运行。祝好运。

Answer 4

使用CSS3动画，对于此时支持它的人。

body {
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
}

在上面的示例中，每当我们更改正文上的opacity时，它都会线性地执行持续0.3秒的淡入淡出效果。将它连接到mousemove只有一次。

document.body.onmousemove = function() {
    this.style.opacity = 1;
    this.onmousemove = null;
};

请参阅google.com改版here :)仅限Chrome和Safari。

Answer 5

我建议使用javascript库，例如http://jquery.com/。

使用jquery，如果你想淡入id为“content”的div，你可以写下面的javascript代码......

$(document).mousemove(function() {
    $("#content").fadeIn();
});

淡入鼠标移动

5 个答案: