javascript - tabla - title label html
Texto parpadeante en el navegador (11)
Quiero hacer un texto parpadeante.
Primero probé la etiqueta HTML <blink> , pero solo es compatible con Mozilla Firefox.
Entonces probé CSS:
<style>
.blink {text-decoration: blink; }
</style>
No está funcionando en IE 6.
Entonces probé javascript:
<script type="text/javascript">
function doBlink() {
// Blink, Blink, Blink...
var blink = document.all.tags("BLINK")
for (var i=0; i < blink.length; i++)
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""
}
function startBlink() {
if (document.all)
setInterval("doBlink()",500)
}
window.onload = startBlink;
</script>
Ahora no está funcionando en Safari o Chrome.
¿Puede alguien ayudarme a usar el texto parpadeante que se ejecutará en todos los diferentes navegadores populares? (IE 6, Mozilla Firefox, Google Chrome Safari, Opera).
Está funcionando sin problemas en todos los navegadores ... Por favor, inténtalo, funcionará
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color==''red''?''white'':''red'');
setTimeout(''blinker()'', 500);
}
}
</script>
<body onload="blinker();">
<div id="blink">Blinking Text</div>
</body>
Este no es mi código, pero funciona bien en nuestro sitio web. El único problema es que funciona si se incluye en el html pero no cuando se hace referencia como un script separado.
<style>
#blinker { color: #58bf7a }
#blinker.on { color: #58d878 }
</style>
<script>
var blinker;
function blink() {
blinker.className = blinker.className ? "" : "on";
}
window.onload = function() {
blinker = document.getElementById("blinker");
var interval_id = setInterval(blink, 1000);
}
</script>
Esto funciona muy bien:
<script type="text/javascript">
function blinker()
{
if(document.querySelector("blink"))
{
var d = document.querySelector("blink") ;
d.style.visibility= (d.style.visibility==''hidden''?''visible'':''hidden'');
setTimeout(''blinker()'', 500);
}
}
</script>
<body onload="blinker();">
<blink>Blinking Text</blink>
</body>
Se parece mucho a la versión anterior, y además se usa de la misma manera.
Esto se puede lograr con CSS3 como tal
@-webkit-keyframes blink {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
-webkit-animation-duration: 1s;
}
Incluso tiene un bonito efecto de fundido. Funciona bien en Safari, pero Chrome llora un poco por dentro.
Implementación sencilla de jQuery, siéntase libre de ampliar para adaptarse a sus necesidades http://jsfiddle.net/L69yj/
var element = $(".blink");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
La verdadera etiqueta de parpadeo del navegador / navegador heredado ...
HTML
<!DOCTYPE html>
<html>
<blink>ULTIMATE BLINK TAG!</blink>
<!--[if lt IE 10]>
<script>
toggleItem = function(){
var el = document.getElementsByTagName(''blink'')[0];
if (el.style.display === ''block'') {
el.style.display = ''none'';
} else {
el.style.display = ''block'';
}
}
setInterval(toggleItem, 1000);
</script>
<![endif]-->
</html>
CSS
blink {
-webkit-animation: blink 1s steps(5, start) infinite;
-moz-animation: blink 1s steps(5, start) infinite;
-o-animation: blink 1s steps(5, start) infinite;
animation: blink 1s steps(5, start) infinite;
}
@-webkit-keyframes blink {
to { visibility: hidden; }
}
@-moz-keyframes blink {
to { visibility: hidden; }
}
@-o-keyframes blink {
to { visibility: hidden; }
}
@keyframes blink {
to { visibility: hidden; }
}
Prueba esta jQuery
function blinks(hide) {
if (hide === 1) {
$(''.blink'').show();
hide = 0;
}
else {
$(''.blink'').hide();
hide = 1;
}
setTimeout("blinks("+hide+")", 400);
}
$(document).ready(function(){
blinks(1);
});
Nota: incluya el archivo jquery y dé un nombre de clase ''parpadear'' en el elemento que desea parpadear.
Consejo: .show () y .hide () no reservan el ancho y la altura del elemento ... Si necesita ocultar el elemento, pero no su lugar (dimensiones) en el documento, use .css (" visibilidad "," oculto o visible ") en su lugar.
También puedes usar esto:
function blinkIt() {
if (!document.all) return;
else {
for(i=0;i<document.all.tags(''blink'').length;i++){
s=document.all.tags(''blink'')[i];
s.style.visibility=(s.style.visibility==''visible'') ?''hidden'':''visible'';
}
}
}
Puede usar un temporizador en lugar de usar la etiqueta. He probado esto en IE7 y Firefox. Ambos navegadores lo permiten, sin embargo, Chrome no funciona correctamente. Espero que tengas la respuesta.
Funciona en IE 10, Firefox 23.0.1, Google Chrome 29.0, Opera 16.0
blink(0.7);
function blink(speed) {
if (speed) {
if (document.getElementsByTagName(''blink''))
setInterval("blink()", speed*2000);
return;
}
var blink = document.getElementsByTagName(''blink'');
for (var i=0; i<blink.length; i++) {
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "";
}
}
var el = $(".blink");
setInterval(function() {el.toggle()}, 500);
<p id="blink">My name is Ankurji1989</p>
<script type="text/javascript">
var blink_line = document.getElementById("blink");
function d_block(){
if(blink_line.style.visibility==''hidden'')
{
blink_line.style.visibility=''visible'';
}
else{
blink_line.style.visibility=''hidden'';
}
}
setInterval(function(){d_block();}, 1000);
</script>