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

14

// 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 могла быть меньше, но в этой форме вы можете легко использовать ее для любого элемента и продолжительности. Повеселись!

источник

2010-07-02 18:35:05 galambalazs

+1

+1 для простейшего и самого маленького решения (kb-wise) ;-) –

+3

+1 за отсутствие использования библиотеки :) –

+0

ну, я не вижу тега jQuery, это очевидно. для меня, по крайней мере ... :) – galambalazs

-1

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

Использование JQuery, если вы хотите, чтобы исчезнуть в DIV с идентификатором «содержание», можно написать следующий код яваскрипта ...

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

источник

2010-07-02 18:29:24

+0

где код для прикрепления его к событию mousemove документа, когда dom заканчивает загрузку? –

4

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

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

источник

2010-07-02 18:32:44 Catfish

+2

Можете также отключить обработчик после его увольнения, чтобы он не возобновлялся снова. – GalacticCowboy

+1

Согласен с Мэттом Бриггсом и Галактическим ковбоем - http://jsbin.com/uvene3 вот это в действии – cgp

+0

-1 никаких упоминаний о jQuery в вопросе. счастлив теперь? – galambalazs

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, чтобы извлекать информацию из целевого/srcElement, если вы решите использовать метод вложения, который не принимает аргументы. Или вы можете жесткий код желаемого значения и объектов в функции:

InLine:

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

уровня DOM 0:

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

DOM Level 2:

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

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

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

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

источник

2010-07-02 19:09:46 John

+0

Можете ли вы показать, как прикрепить его к элементу (телу?). – GalacticCowboy

+0

Обновление, которое я сделал, должно помочь людям. Спасибо, что показал недостаток в моем ответе. – John

+0

Это фантастика! – gravityboy

1

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

источник

2010-07-02 20:05:16 Anurag

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

ответ

Смежные вопросы