Как мне изменить содержание div при первом движении мыши, как на google.com, с помощью JavaScript? Я не хочу, чтобы это снова исчезло.

7
alexwithk 2 Июл 2010 в 22:24

5 ответов

Лучший ответ

Код: (увидеть его в действии)

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

Примечание: функция затухания могла бы быть меньше, но в этой форме вы можете легко использовать ее для любого элемента и продолжительности. Повеселись!

14
14 revs 10 Июл 2010 в 00:22

Если вы используете jquery и хотите, чтобы он исчезал как Google, вы можете сделать что-то вроде этого

$('body').mousemove(function() {
  $('#content').fadeIn();
});
4
Catfish 2 Июл 2010 в 18:32

Вы можете создать эффект затухания для тела, как 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);

Вы также захотите настроить правило css для элемента body, чтобы убедиться, что он не виден при загрузке страницы:

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

Я проверил этот код для правильной работы на IE8, Chrome, Safari, FireFox и Opera. Удачи.

3
John 2 Июл 2010 в 21:08

Я бы порекомендовал использовать библиотеку JavaScript, например http://jquery.com/.

Используя jquery, если вы хотите перейти в div с идентификатором «content», вы можете написать следующий код javascript ...

$(document).mousemove(function() {
    $("#content").fadeIn();
});
-1
Bob Black 8 Июл 2010 в 18:20

Использование CSS3-анимации для тех, кто поддерживает это на данный момент.

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

В приведенном выше примере, всякий раз, когда мы изменяем opacity на теле, он будет производить эффект затухания длительностью 0.3 секунд. Прикрепите его к движению мыши только один раз.

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

См. Обновленный google.com здесь :) Только для Chrome и Safari.

1
Anurag 2 Июл 2010 в 20:12