2015-07-24 2 views
-1

Есть ли способ сделать окно или, по крайней мере, страницу, flash/blink с помощью JQuery или обычного JavaScript? Я пытаюсь заставить эту вкладку тоже заиграть. Прямо сейчас у меня естьКак сделать экранную вспышку с JQuery

var flash = true; 
var alert = setInterval(function(){ 
    if (flash) 
     //doFlash 
    else 
     //stopFlash 
    flash = !flash; 
}, 1000); 

EDIT: Извините за любую путаницу, я имел в виду яркость окна. Мне было интересно, есть ли способ щелкнуть яркостью экрана, чтобы предупредить пользователей. Мне также было любопытно, как мерцать вкладку, когда окно также минимизировано.

+0

что определение 'flash'? Пожалуйста, прочитайте: http://stackoverflow.com/help/how-to-ask – charlietfl

ответ

1

Вы можете выбрать более высокий уровень элемента, как body (или какой-нибудь главный div) и переключить opacity элемента из 0 в 1 с помощью таймера JS.

(вы можете изменить другие вещи, как в соответствии с вашими потребностями) http://jsfiddle.net/josangel555/3w203Lsp/2/

JS (вы можете использовать следующие строки, один для если и один для другого.)

$('.main').addClass("flash"); 

$('.main').removeClass("flash"); 

CSS (таймер включение и отключение непрозрачности целевого элемента.)

.flash{ 
    opacity: 0; 
} 
1

Посмотрите на это! Используется jQuery и некоторые CSS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 

 
<head> 
 
<link href='https://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'> 
 

 
<style> 
 

 
@keyframes blink { 
 
    50% { 
 
    background: #cc5; 
 
    background-size: 75px 150px; 
 
    } 
 
} 
 
@-webkit-keyframes blink { 
 
    50% { 
 
    background: #cc5; 
 
    background-size: 75px 150px; 
 
    } 
 
} 
 
@-moz-keyframes blink { 
 
    50% { 
 
    background: #cc5; 
 
    background-size: 75px 150px; 
 
    } 
 
} 
 

 
.laser { 
 
    animation: blink 2s infinite; 
 
    -webkit-animation: blink 2s infinite; 
 
    -moz-animation: blink 2s infinite; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 

 
<button class="flash">click to blink</button> 
 

 
<script> 
 
// Button to toggle 
 
$(document).ready(function(){ 
 
$('.flash').click(function() { 
 
    $('body').toggleClass('laser'); 
 
}); 
 
}); 
 

 
</script> 
 

 
</body>

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