Știu că intermitența textului este interzisă în multe locuri, dar totuși, deoarece clientul meu o cere, am nevoie să fac să clipească un rând de text folosind HTML, JavaScript, care este fezabil. Aș vrea ca textul să apară și să dispară în câteva secunde și să continue acest ciclu.
Știu că text-decoration:blink din CSS poate face acest lucru, dar funcționează doar în FireFox, Opera. Și am nevoie ca acest lucru să funcționeze în toate browserele Firefox, Chrome, Safari, IE. Am căutat și am încercat o mulțime de coduri Javascript, dar nici unul nu pare să funcționeze.
Deci, oricine care știe cum să facă acest lucru, vă rog să postați o versiune de lucru a codului care face să clipească textul în toate browserele.
- Se pare că s-ar putea să aveți nevoie de tag-ul blink pe server! cheese.blartwendo.com/web21-demo.html – > Por Dan Breen.
- @DanBreen Fiți conștienți doar că s-ar putea să nu funcționeze în Web 2.2 – > Por Widor.
- Vă rog, de dragul sănătății mintale, nu adăugați jQuery doar pentru a îndeplini această sarcină simplă. Sunt îngrozit de numărul de răspunsuri de aici care sugerează că jQuery este necesar pentru acest lucru. Incredibil, băieți – serios, mergeți să învățați javascript. Pentru binele vostru. – > Por Chris Baker.
- -1 pentru lipsa de curaj față de client că se înșeală. – > Por Raynos.
- @Raynos – unii clienți nu pot fi convinși și, în cele din urmă, dacă asta este ceea ce își dorește, asta trebuie să livreze ivn. – > Por Marek Karbarz.
Puteți face ceva de genul acesta:
<div id="Foo">Blink</div>
Cu scriptul:
$(document).ready(function() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
});
Exemplu: http://jsfiddle.net/7XRcJ/
Dacă nu folosiți jQuery, puteți încerca ceva de genul acesta:
window.addEventListener("load", function() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
}, false);
Diferitele browsere au moduri diferite de a lega gestionarii de evenimente, așa că vă sugerez cu tărie să folosiți un fel de bibliotecă cross-browser pentru acest tip de lucru, dacă este posibil.
Puteți încerca, de asemenea, să utilizați evenimentul onload din tag-ul body. Iată un exemplu complet pe care l-am testat în FF și IE7:
Comentarii
- Ah, îmi pare rău, am testat doar în Firefox. Primiți o eroare sau altceva, sau pur și simplu nu clipește? – > .
Mă simt murdar.
Comentarii
- ? @david jsfiddle este perfect pentru acest gen de lucruri, permite tuturor să verifice fără probleme. – > .
- @Loktar am fost având un digg la unul dintre comentariile chris postat – > .
- … da, de fapt, chiar funcționează, după cum puteți vedea în jsFiddle. Dacă nu funcționează, înseamnă că ai făcut ceva greșit. Folosiți jsFiddle pentru a posta o mostră din codul dvs. și mă pot uita. – > .
- Ok, toate voturile în jos pe răspunsul fiecăruia sunt cam jalnice. Oamenii încearcă doar să ajute aici. – > .
- Comentariile negative sunt destul de exagerate la această întrebare de prost gust, deși, voi spune că răspunsurile care folosesc jQuery (având în vedere că întrebarea nu este etichetată cu jQuery) sunt inexacte din punct de vedere tehnic – codul nu va funcționa dacă OP ar trebui să îl copieze/lipeste. Și, jQuery este oribil. Material de downvote, probabil că nu, dar totuși… Acestea fiind spuse, @ivn, fiecare răspuns de aici face funcționează. – > .
dacă folosiți jQuery puteți face ceva de genul
<div id="msg"> <strong>This will blink</strong> </div>
<script type="text/javascript" />
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
$(function() {
blink('#msg');
});
</script>
Aruncați o privire la acest fragment.
function blinkIt() {
var blinks = document.getElementsByClassName("blink");
for(var i = 0, l = blinks.length; i < l; i++){
var blink = blinks[i];
var visiblity = blink.style.visibility;
blink.style.visibility = visiblity == 'visible' ? 'hidden' : 'visible';
}
}
setInterval(blinkIt, 500 /* blinking interval in ms */);
Această soluție va face ca toate elemente cu clasa blink să clipească.
EDIT: Testat pe Firefox, Chrome și IE9.
Comentarii
- @ivn: fragmentul nu funcționează pentru tine? pentru că este pe deplin funcțional, deci probabil că ai făcut ceva greșit. De asemenea, asigurați-vă că toate elemntele pe care doriți să clipească au class setat la
blink. – > . - Cred că acest cod este destul de elegant, direct și minimalist. Nu înțeleg de ce a fost votat doar o singură dată. Îmi place. – > .
Dacă chiar trebuie să faci asta, atunci poți folosi pluginul blink pentru jQuery
http://www.antiyes.com/jquery-blink-plugin
$(document).ready(function() {
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink({delay:100}); // causes a 100ms blink interval.
});
Comentarii
- Serios? Adăugați 20.000 de linii de jQuery pentru a face ceva atât de rudimentar? Hai să tăiem o scobitoare cu o drujbă! – > .
- Dacă rulează deja jQuery, atunci nu văd nimic în neregulă cu asta, sincer să fiu. – > .
- sunt 20000 de linii chiar dacă ai jQuery? – > .
- Ah, destul de corect. În acest caz îmi retrag răspunsul. – > .
- Da, lăsați-l aici. S-ar putea să nu fie potrivit pentru ivn, dar acest răspuns poate fi de ajutor pentru altcineva care caută soluția aceleiași probleme în viitor. – > .
Ai putea face textul să clipească prin jquery. Puneți textul pe care doriți să-l faceți să clipească într-un câmp <blink> tag și javascript-ul de mai jos îl va face să clipească. Măriți durata de mai jos dacă clipește prea repede.
<script type="text/javascript">
setInterval(function(){
$('blink').each(function(){
$(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden')
});
}, 250);
</script>
<blink>Text to blink here</blink>
Folosind api de animație web:
Puteți folosi ceva de genul acesta
<html>
<head>
<style>
#blink{
color:black;opacity:1;font-size:3EM;
}
</style>
</head>
<body>
<div id="blink">
Poop
</div>
<script>
var ops,blink=document.getElementById('blink');
ops=1
setInterval(function (){
ops = (ops < 1) ? 1:0;
blink.style.opacity=ops;
},500);
</script>
</body>
CSS:
.hidden { visibility: hidden; }
JS:
setInterval(blinkFunc, 200)
blinkFunc = function () {
var selector = '#some-selector';
jQuery(selector + ':visible').addClass('hidden');
jQuery(selector + ':not(:visible)').removeClass('hidden');
}
Acesta este probabil cel mai bun pentru mai multe browsere. Rețineți că Webkit face niște lucruri nebunești cu vizibilitatea, așa că ar putea fi mai ușor să schimbați doar culoarea.
Comentarii
- Mă tem că niciuna dintre soluțiile dumneavoastră nu funcționează în totalitate pentru mine. Una sau două dintre ele funcționează în Firefox, dar nu funcționează în Chrome Safari. – > .