Javascript para la prevención de "burn-in" problema en la pantalla LCD

Question

Estoy construyendo una aplicación web no pública que se utilizará como información de monitores. Como tal, se ejecutará 24/7 en una pantalla de TV LCD.

ya que esto podría producir un error de "color burn-in" en la pantalla LCD Busco un Javascript que evitará/reducir este problema. Quiero usar algo similar a los que usan en las pantallas de los aeropuertos (una línea que se mueve periódicamente de izquierda a derecha y de arriba a abajo y cambia de color).

¿Conoce alguna Javascript hacer esto? ¡Gracias!

Answer 1

En caso de que todavía estaban interesados: (utiliza jQuery)

var $burnGuard = $('<div>').attr('id','burnGuard').css({ 
    'background-color':'#FF00FF', 
    'width':'1px', 
    'height':$(document).height()+'px', 
    'position':'absolute', 
    'top':'0px', 
    'left':'0px', 
    'display':'none' 
}).appendTo('body'); 

var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000; 
function burnGuardAnimate() 
{ 
    color = ++color % 3; 
    var rColor = colors[color]; 
    $burnGuard.css({ 
     'left':'0px', 
     'background-color':rColor, 
    }).show().animate({ 
     'left':$(window).width()+'px' 
    },scrollDelay,function(){ 
     $(this).hide(); 
    }); 
    setTimeout(burnGuardAnimate,delay); 
} 
setTimeout(burnGuardAnimate,delay); 

Ejemplo de trabajo encontrar aquí: http://www.jsfiddle.net/bradchristie/4w2K3/3/ (o full screen version)

Answer 2

que utiliza el guión de Brad, pero por desgracia mi página tenido una tabla HTML grande que extenderse fuera del contenedor principal. Esto hizo que la barra de píxeles solo viajara parcialmente por la pantalla. En lugar de alterar mi tabla, agregué un guión de recuadro delimitador para encontrar el ancho real de la tabla html y luego lo usé para establecer el ancho en el guión de Brad.

var div = document.getElementById ("HtmlTable-ID"); 

     if (div.getBoundingClientRect) {  
      var rect = div.getBoundingClientRect(); 

      w = rect.right - rect.left; 

      // alert (" Width: " + w); 
     } 

var $burnGuard = $('<div>').attr('id','burnGuard').css({ 
    'background-color':'#FF00FF', 
    'width':'1px', 
    'height':$(document).height()+'px', 
    'position':'absolute', 
    'top':'0px', 
    'left':'0px', 
    'display':'none' 
}).appendTo('body'); 

var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000; 
function burnGuardAnimate() 
{ 
    color = ++color % 3; 
    var rColor = colors[color]; 
    $burnGuard.css({ 
     'left':'0px', 
     'background-color':rColor, 
    }).show().animate({ 
     'left': w +'px' 
    },scrollDelay,function(){ 
     $(this).hide(); 
    }); 
    setTimeout(burnGuardAnimate,delay); 
} 
setTimeout(burnGuardAnimate,delay);