Затухание в движении мыши (например, на google.com)

Как я могу исчезать в div-содержимом при первом движении мыши, например, на google.com, используя javascript? Я не хочу, чтобы он снова исчезал.

7
задан alexwithk 02 июля '10 в 21: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 );
};

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

14
ответ дан galambalazs 02 июля '10 в 21:35
источник поделиться

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

$('body').mousemove(function() {
  $('#content').fadeIn();
});
4
ответ дан Catfish 02 июля '10 в 21: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, чтобы извлекать информацию из целевого /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 02 июля '10 в 22:09
источник поделиться

Использование анимации 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 revamped здесь:) Только Chrome и Safari.

1
ответ дан Anurag 02 июля '10 в 23:05
источник поделиться

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

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

$(document).mousemove(function() {
    $("#content").fadeIn();
});
-1
ответ дан Bob Black 02 июля '10 в 21:29
источник поделиться

Другие вопросы по меткам или Задайте вопрос