Постепенно появитесь на движении мыши
Как я постепенно появляюсь содержание отделения на первом движении мыши, как на google.com, с помощью JavaScript? Я не хочу, чтобы это постепенно исчезло снова.
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 );
};
Примечание: функция затухания могла бы быть меньше, но в этой форме вы можете легко использовать ее повторно. для любого элемента и продолжительности. Повеселись!
Вы можете создать эффект затухания для тела, как 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, если вы решите использовать метод присоединения, который не принимает аргументы. Или вы можете жестко закодировать желаемые значения и объекты в функцию:
Inline:
<body id="theBody" onmouseover="fadeIn('theBody', 1500)">
DOM Level 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, чтобы убедитесь, что он не отображается при загрузке страницы:
body {
opacity: 0;
filter:alpha(opacity=0);
}
Я проверил, что этот код правильно работает в IE8, Chrome, Safari, FireFox и Opera. Удачи.
Если вы используете jquery и хотите, чтобы он исчезал, как Google, вы можете сделать что-то вроде этого
$('body').mousemove(function() {
$('#content').fadeIn();
});
Использование анимации CSS3 для тех, кто поддерживает ее на данный момент.
body {
opacity: 0;
-webkit-transition: opacity 0.3s linear;
}
В приведенном выше примере всякий раз, когда мы изменяем непрозрачность на теле, будет линейно эффект затухания длительностью 0,3 секунд. Прикрепите его к mousemove только на один раз.
document.body.onmousemove = function() {
this.style.opacity = 1;
this.onmousemove = null;
};
См. Обновленный google.com здесь :) Только Chrome и Safari.
Я бы порекомендовал использовать библиотеку javascript, например http: // jquery .com / .
Используя jquery, если вы хотите скрыть div с идентификатором content, вы можете написать следующий код javascript ...
$(document).mousemove(function() {
$("#content").fadeIn();
});