IZBORNIK HOME FORUM ACCESS EXCEL WORD KAZALO
   
  Kazalo - sadržaj tema
  Uvod u JavaScript
1 Načini ispisa
2 Kontrola prozora
2a Sintaxa
3 Kontrola događaja
3a Kontrola toka
4 Detekcija podataka
5 Efekti s podlogom
6 Efekti s tekstom
7 Efekti sa slikom
8 Razna rješenja
9 Rad s formama
10 Razni primjeri
11 Ključne riječi
12 Događaji
   
 
AutoCAD tutoriali

-

-
 

Adsense sponzor



JS - JAVA SCRIPT za početnike i neznalice - JAVA SCRIPT for dummies

JS - EFEKTI S TEKSTOM Search This Web Site

Adsense sponzor






GRADACIJA TEKSTA

JavaScriptom možemo tekstu dati neke zanimljive efekte. Pogledajte primjer gradacije teksta:

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function
izradiTablu(n) {
        var nb;
        this.length = n;
        for (var i = 1; i <=n; i++)
            if (i<10) {
                nb = i+"";
                nb = nb.substring(0,1);    
                this[i] = nb;
            }
        return this;
    }

    function
konvertujBoje(color) {
        var hexa1;
        var hexa2;
        var colorHexa;
        tabHex = new izradiTablu(16);
        tabHex[10]="A"; tabHex[11]="B"; tabHex[12]="C"; tabHex[13]="D"; tabHex[14]="E"; tabHex[15]="F";
        hexa2 = (color%16);
        hexa1 = parseInt(color/16);
        hexa2 = tabHex[hexa2];
        if (hexa2 == null)
            hexa2 = "0";
        hexa1 = tabHex[hexa1];
        if (hexa1 == null)
            hexa1 = "0";
        colorHexa = hexa1 + hexa2;
        return colorHexa;
    }

    function
dajGradaciju(mojTekst, velicinaFonta, vrstaFonta, osnovnaRGBboja) {
        var factor = 256/(mojTekst.length+1);
        var i;
        var c1,c2,c3;
        for (i=0;i<mojTekst.length;i++) {
            ton=factor*i;
            if (osnovnaRGBboja == 0) {
                c1 = 'FF'
                c2 = konvertujBoje(ton);
                c3 = c2;
            }
            else if (osnovnaRGBboja == 1) {
                c1 = konvertujBoje(ton);
                c2 = 'FF'
                c3 = c1;
            }
            else {
                c1 = konvertujBoje(ton);
                c2 = c1;
                c3 = 'FF'
            }
            document.write (
'<FONT SIZE=' + velicinaFonta + ' FACE="' + vrstaFonta + '" COLOR="#' + c1 + c2 + c3 + '">' + mojTekst.substring (i,i+1) + '</FONT>');
        }
    }
    //-->
</SCRIPT>
</HEAD>

<BODY>
<H3>Primjer GRADACIJE teksta.</H3>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    dajGradaciju(
'Probni tekst za efekat TEXT GRADATION...CRVENI',6,'Times New Roman',0)
    document.write
('<BR>');
    dajGradaciju(
'Probni tekst za efekat TEXT GRADATION...ZELENI',6,'Times New Roman',1)
    document.write
('<BR>');
    dajGradaciju(
'Probni tekst za efekat TEXT GRADATION...PLAVI',6,'Times New Roman',2)
    //-->
</SCRIPT>
</BODY>
</HTML>

Funkciju dajGradaciju() pozivamo sa slijedećim parametrima:
    dajGradaciju(
željeni tekst, veličina slova, vrsta slova, osnovna boja)

Zadnji broj u funkciji dajGradaciju() predstavlja osnovnu RGB boju i može biti:
    0 - za crveni tekst
    1 - za zeleni tekst
    2 - za plavi tekst

U prilogu js-vje6a.html   možete vidjeti kako ova gradacija izgleda u praksi...


SCROLL SADRŽAJA DOKUMENTA

Sadržaj HTML dokumenta moguće je "skrolirati". Pogledajte kako:

<HTML><HEAD></HEAD>
<BODY>
<SCRIPT language="JavaScript">
    var tekucaPozicija=0, alt=1, pozicija1=0, pozicija2=-1


    function
inicijaliziraj(){
        startujSkroliranje()
    }


    function
startujSkroliranje(){   /* poziv skrola u vremenskim razmacima od 10 milisekundi */
        setInterval("skrolirajProzor()",10)
    }


    function
skrolirajProzor(){    /* rutina za skroliranje */
        if (document.all)
            temp=document.body.scrollTop
        else
            temp=window.pageYOffset
        if (alt==0)
            alt=1
        else
            alt=0
        if (alt==0)
            pozicija1=temp
        else
            pozicija2=temp
        if (pozicija1!=pozicija2){
            if (document.all)
                tekucaPozicija=document.body.scrollTop+1
            else
                tekucaPozicija=window.pageYOffset+1
            window.scroll(0,tekucaPozicija)
        }
        else{
            tekucaPozicija=0
            window.scroll(0,tekucaPozicija)
        }
    }


    window.onload=inicijaliziraj 
/* pokretanje skroliranja */
</SCRIPT>

<CENTER>
<H3>Primjer skroliranja dokumenta...</H3>
<IMG SRC="js-bkgIE.JPG"><BR>
<SCRIPT>
    for (var i = 1; i <=15; i++)
/* da ne upisujem ručno sav taj tekst! */
       document.write("<P>Ovo je " + i + ". red probnog teksta u dokumentu...")
</SCRIPT>
</CENTER>
</BODY>
</HTML>

U prilogu js-vje6b.html možete vidjeti kako ovo skroliranje izgleda...


SKROLIRANJE UNUTAR LAYERA KORISTEĆI MARQUEE

Skroliranje možemo izvesti i pomoću layera (definiranog područja na ekranu) tako da unutar njega učitamo objekt marquee (koji ima ugrađene opcije za vrstu skroliranja, brzinu i drugo) te unutar ovoga upišemo tekst (ili HTML kod!) koji želimo da se pojavi u područnu za skroliranje. Evo primjera:

<HTML><HEAD></HEAD>
<BODY BGCOLOR="silver">
<CENTER><H3>Primjer skroliranja teksta unutar layera...</H3>
<SCRIPT language="JavaScript">
    var sirinaPolja=250
    var visinaPolja=200
    var brzinaSkroliranja=1

    /* u sadrzajPolja stavljamo sav HTML kod i tekst koji želimo da se pojavi u području za skroliranje! */
    var sadrzajPolja='<CENTER><FONT face="Arial"><B>Tutorial - JavaScript.</B><HR>Hvala na posjeti <A HREF="ic.ims.hr">ove WWW</A><HR><IMG SRC="http://ic.ims.hr/java/ic-ims-logo-javascript.gif"><BR></FONT></CENTER>'

    if (document.all)
/*postavka objekta Marquee: boja podloge, smjer skroliranja, brzina skroliranja, veličina područja i boja slova */
        document.write(
'<MARQUEE bgcolor="white" direction="up" scrollAmount=' + brzinaSkroliranja + ' style="width:'+sirinaPolja+';height:'+visinaPolja+';color:blue">' + sadrzajPolja + '</MARQUEE>')

    function
regeneriraj(){
        window.location.reload()
    }

    function
regeneriraj2(){
        if (document.layers){
            setTimeout("window.onresize=regeneriraj",450)
            inicijaliziraj()
        }
    }

    function
inicijaliziraj(){
        document.mojMarquee01.document.mojMarquee02.document.write(sadrzajPolja)
        document.mojMarquee01.document.mojMarquee02.document.close()
        visina = document.mojMarquee01.document.mojMarquee02.document.height
        skroliraj()
    }

    function
skroliraj(){
        if (document.mojMarquee01.document.mojMarquee02.top >= visina*(-1)){
            document.mojMarquee01.document.mojMarquee02.top-=brzinaSkroliranja
            setTimeout("skroliraj()",100)
        }
        else{
            document.mojMarquee01.document.mojMarquee02.top=visinaPolja
        skroliraj()
        }
    }

    window.onload=regeneriraj2
/* pokreće skroliranje */
</SCRIPT>
<ILAYER WIDTH=&{sirinaPolja}; HEIGHT=&{visinaPolja}; NAME="mojMarquee01">
    <LAYER NAME="mojMarquee02" WIDTH=&{
sirinaPolja}; HEIGHT=&{visinaPolja};></LAYER>
</ILAYER>
</CENTER>
</BODY>
</HTML>

U prilogu js-vje6c.html možete provjeriti kako ovo izgleda u praksi...


ZUMIRANJE TEKSTA

Na kraju, evo još jednog zanimljivog efekta - zumiranje teksta:

<HTML>
<HEAD>
<SCRIPT Language="Javascript">
    <!--
    imeBrowsera = navigator.appName;
    verzijaBrowsera = parseInt(navigator.appVersion)
    if ((imeBrowsera=="Netscape" && verzijaBrowsera>=4) || (imeBrowsera=="Microsoft Internet Explorer" && verzijaBrowsera>=4)){
        if (imeBrowsera=="Netscape"){
            browserNetscape=true
            milisekundi=30
        }
        else{
            browserNetscape=false
            milisekundi=80
    }
    var msg=0;
    var z=0;
    var timer1;
    var poruka= new Array();
    var color= new Array();
    var vrijednost= new Array('-6','-5','-4','-3','-2','-1','+1','+2','+3','+4','+5','+6')

    /* Slijedi upis poruka koje želite da se pojavljuju zumirane i njihovih boja! */
    poruka[0]='Vi ste posjetili'
    color[0]='#FF0000'

    poruka[1]='TUTORIAL'
    color[1]='#0000FF'

    poruka[2]='JavaScript za početnike'
    color[2]='#FF00FF'

    poruka[3]='koji je obradio DT'
    color[3]='#00FF00'

    poruka[4]='a publishirao IC'
    color[4]='#000000'

    function
start(){
        if ((imeBrowsera=="Netscape" && verzijaBrowsera>=4) || (imeBrowsera=="Microsoft Internet Explorer" && verzijaBrowsera>=4)){
            if(z<vrijednost.length){
                if (browserNetscape){
                    document.layers['text'].document.writeln('<P Class="main" Align="Center"><font color="'+color[msg]+'" size="'+vrijednost[z]+'" face="Arial"><NOBR>' + poruka[msg] + '</NOBR></font></P>')
                    document.layers['text'].document.close();
                }
                else{
                    text.innerHTML='<Pre><P Class="main" Align="Center"><font color="'+color[msg]+'" size="'+vrijednost[z]+'" face="Arial"><NOBR>' + poruka[msg] + '</NOBR></font></P></Pre>'
                }
                z++;
                timer1=window.setTimeout('start()',milisekundi)
            }
            else
                podesi();
        }
    }

    function
stop(){
        if ((imeBrowsera=="Netscape" && verzijaBrowsera>=4) || (imeBrowsera=="Microsoft Internet Explorer" && verzijaBrowsera>=4))
            window.clearTimeout(timer1);
            window.clearTimeout(timer2);
    }

    function
podesi(){
        if (browserNetscape){
            document.layers['text'].document.writeln('')
            document.layers['text'].document.close();
        }
        else
            text.innerHTML='';
            if(msg<poruka.length-1){
                msg++;
            }
            else
                msg=0;
                z=0;
                timer2=window.setTimeout('start()',1000)
        }
    }
    //-->
</SCRIPT>
</HEAD>
<BODY onLoad="
start()" onUnload="stop()">

<!-- poziciju početka zumiranja postavljamo ovdje, sa left i top! -->
<DIV ID="text" STYLE="position: absolute; left: 50; top: 100"></DIV>

<LAYER NAME="text" left=4 top=80></LAYER>
<H4>Primjer zumiranja teksta...</H4>
<HR>
</BODY>
</HTML>

U prilogu js-vje6d.html svakako pogledajte kako to zumiranje izgleda...

 

Adsense sponzor






 Ova web stranica koristi COOKIES - COPYRIGHT - 2006 - 2016 - IvanC - ic.ims.hr