A blink html tag-gel lehetne villogtatni egy szöveget, de igazából csak firefox-ban működik. És csak a láthatóságot kapcsolta be illetve ki időközönként. Mint mindenre, erre is lehet manapság rengeteg megoldást találni a neten javascripttel. Írtam egyet én is, ami gyakorlatilag bármilyen CSS tulajdonságát képes váltogatni a kiválasztott elemnek. Lehet id és osztály alapján kiválasztani az elemeket. Ezen kívül, ha osztálynév alapján lett megjelölve a villogtatandó tartalom, lehet szűkíteni az elemek listáját egy adott csomópont elemeire. ID ugyebár egy oldalon egyedi kell legyen, így ott nem is lenne sok értelme csomópontra korlátozni. Illetve egy elemre több különböző "blink" is alkalmazható. Majd le is állíthatók.
Lényegében egy javascript osztályról van szó.
blink.js
{
var instance = this;
var node;
var state = false;
var resInterval = 0;
var oldStyles = new Array();
var newStyle = arguments.length > 2 ? arguments[2] : {
visibility: 'hidden'
};
var objs = new Array();
var blinkById = function(id)
{
var obj = document.getElementById(id);
obj.style.visibility = 'visible';
var index;
oldStyles.push({});
for (index in newStyle)
{
oldStyles[0][index] = obj.style[index];
}
objs.push(obj);
}
var blinkByClass = function(id)
{
//objektumok lekérdezése
var all = node.getElementsByTagName('*');;
var i;
var reg = new RegExp('\\b'+id+'\\b');
for (i = all.length-1; i >= 0; i--)
{
var obj = all[i];
if (!reg.test(obj.className))
{
continue;
}
obj.style.visibility = 'visible';
var index;
for (index in newStyle)
{
var os = {};
os[index] = obj.style[index];
oldStyles.push(os);
}
objs.push(obj);
}
}
instance.blink = function()
{
if (arguments.length)
{
node = arguments[0].substr ? document.getElementById(arguments[0]) : arguments[0];
}
else
{
node = document.getElementsByTagName('body')[0];
}
if (!resInterval)
{
var ch = id.charAt(0);
if (ch == '.')
{
blinkByClass(id.substr(1));
}
else
{
if (ch == '#')
{
blinkById(id.substr(1));
}
else
{
blinkById(id);
}
}
}
var i;
for (i=objs.length-1; i >= 0; i--)
{
var tmpStyle = state ? oldStyles[i] : newStyle;
var index;
for(index in newStyle)
{
objs[i].style[index] = tmpStyle[index];
}
}
state = !state;
if (!resInterval)
{
resInterval = setInterval(instance.blink, ms);
}
}
instance.stop = function()
{
if(resInterval)
{
clearInterval(resInterval);
resInterval = 0;
}
}
}
Használata:
Először illeszd be a blink.js scriptet.
<script type="text/javascript" src="blink.js"></script>
Majd akár külső javascriptben, akár script tag-ek között jöhet a tartalom kiválasztása. Természetesen csak miután betöltődtek a villogtatandó elemek.
Vegyük a legegyszerűbb verziót, ahol "villogj" id-jű div tartalmát villogtatnánk másodpercenként.
new Blink('villogj',1000).blink();
Az első paraméter az id. A második a villogás sebessége ezred másodpercekben számolva. Az első paraméter megadható még # jellel kezdve is, ha id-ről van szó. Illetve ponttal kezdve, ha osztályról. Ám amennyiben meg van adva a 3. paraméter is, akkor egy asszociatív tömbben lehet felsorolni az új CSS tulajdonságokat. Ekkor a megadott, és az eredetit fogja váltogatni. Például legyen egy bármilyen szöveg kék színűre, majd eredetire változtatva.
color: 'blue'
}).blink();
Persze, ha csak a "villogtathato" id-jű diven belüli, "osztaly" osztályú elemeket kell ilyen módon villogtatni, akkor a blink() metódusnak kell átadni paraméterként vagy ezt a csomópontot, vagy az id-jét.
color: 'blue'
}).blink('villogtathato');
color: 'blue'
}).blink(document.getElementById('villogtathato'));
Le is lehet állítani a villogást. De akkor külön változóba kell tenni az objektumot.
color: 'blue'
});
setTimeout(b.stop, 3000);
A fenti script 3 másodpercig villogtat. Ez az 500 ezredmásodperces sebességgel 3 (oda-vissza) színváltást jelent.
Most lássuk egyben a fájlokat.
index.html
<head>
<meta http-equiv="content-type" content="text-html; charset=utf-8" />
<style type="text/css">
#egyik {
visibility: hidden;
}
.villogo {
color: blue;
}
</style>
<script type="text/javascript" src="blink.js"> </script>
<script type="text/javascript" src="init.js"> </script>
</head>
<body>
<span id='egyik' style="color: orange;">Itt egy szöveg</span>, <span class="v1 villogo">ami villog</span>:
<div id="villogtathato">
<span id='masik' class="villogo v2">villogó szöveg.</span>
</div>
Ez meg nem villog.
</body>
</html>
init.js
{
new Blink('#egyik',300).blink();
new Blink('.villogo',200,{
color: 'red'
}).blink('villogtathato');
new Blink('masik',1000).blink();
}
Itt egy szöveg, ami villog:
villogó szöveg.
Ez meg nem villog.
Hozzászólások
Bár én sem vagyok vmi JS
Bár én sem vagyok vmi JS zseni még, de tudtommal nem igazán szeretjük az asszociatív tömböket ill. a new kulcsszót
Nem tudom, hol hallottad
Nem tudom, hol hallottad ezeket. Nem a new kulcsszóval van a baj, hanem azzal, aki az osztályát úgy írja meg, mint ahogy én is tettem... vagyis megbíztam benne, hogy mindig new kulcsszóval lesz meghívva a függvény, azaz új példány jön létre és nem a window-nak adom át a tulajdonságokat. De még így sem az a baj, ha használod a new-t, hanem az, ha nem. Amin segíthetsz, ha a konstruktornak szánt függvényben a this-t ellenőrizve szükség esetén magad példányosítod az objektumot és ezzel ugyanazt az eredményt éred el. Persze több módon lehet JS-ben objektumot készíteni. Egyik módja pont az, amikor "asszociatív tömböt" deklarálsz, aminek elemei a metódusok és tulajdonságok. Persze ekkor nem igazán lesznek privát tulajdonságaid. Aztán igen, ott az Object.create metódus. Ami viszont akkoriban, mikor a cikk készült nem igazán volt böngészőfüggetlen. Object.create() browser compatibility
Az objektumok létrehozásának és öröklésének egyszerűsítése volt a cél vele, de ettől még a mai napig teljesen normális, ha azt írod például, hogy
var date = new Date();Ja értem, akkor tárgytalan
Ja értem, akkor tárgytalan