Появляются движения мыши - PullRequest
Новая
       7

Появляются движения мыши

7 голосов
/ 02 июля 2010

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

Ответы [ 5 ]

14 голосов
/ 02 июля 2010

Код: ( Посмотреть в действии ) 

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

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

4 голосов
/ 02 июля 2010

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

$('body').mousemove(function() {
  $('#content').fadeIn();
});
3 голосов
/ 02 июля 2010

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

1 голос
/ 03 июля 2010

Использование 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.

0 голосов
/ 02 июля 2010

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

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

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