E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Javascript

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DEVELOPMENT  /  Javascript  /  Introducere in Javascript (13)

Banda de stiri cu scroll in Javacript

24.06.2010
Banda de stiri cu scroll in Javacript

In acest tutorial va voi arata cum sa creati un scroll de stiri in javascript. Acesta este util in cazul in care dorim sa economisim spatiu sau vrem sa atragem atentia utilizatorilor asupra noutatilor de pe site.

Total vizualizari: 9108 9108 afisari   |   Comentarii  4   |   Rating   |   (4 voturi)   |   Timp necesar: 20 min 20 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Autor: mozzartut Expert
Download
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

In acest tutorial va voi arata cum sa creati un scroll de stiri in javascript. Acesta este util in cazul in care dorim sa economisim spatiu sau vrem sa atragem atentia utilizatorilor asupra noutatilor de pe site.

Banda de stiri functioneaza atat in pagini html cat si php si este compatibila cu majoritatea navigatoarelor de internet. In cazul de fata, vom crea o pagina php ce va include fisierul javascript si fisierul css pentru formatare.

In acest tutorial vei invata cum sa faci un scroll de stiri in javascript. Pentru mai multe tutoriale intra pe http://mozzartut.isgreat.org.

Ce este banda de stiri?

Banda de stiri este formata dintr-un div de dimensiuni variate in care sunt incadrate diferite informatii, imagini si legaturi catre alte pagini. Viteza cu care se deruleaza textul poate fi setata in fisierul javascript, cu mentiunea ca o valoare mai mica a numarului determina o viteza mai mare.

In HTML, tag-urile <marquee> au un rezultat asemanator, insa efectul nu este acelasi, ci unul mai sacadat.

1. Codul Javascript

Pentru inceput, cream fisierul javascript (simple-news-scroll.js) in care vom defini variabilele i, pause, div si dif astfel:

  • Variabila pause este o variabila booleana ce indica daca textul este sau nu animat. In concluzie, cele doua valori ale sale sunt true (textul nu se misca / este declansata cand trecem cu mouse-ul deasupra div-ului) sau false (textul se misca / este valoarea implicita);
  • Variabila i exprima pozitia textului in cadrul div-ului la un moment dat si este incrementata doar daca pause este false;
  • Variabila div este initializata cu ajutorul functiei getElementById('id element html'); si reprezinta div-ul cu id-ul stiri din documentul html;
  • Variabila dif reprezinta diferenta dintre lungimea totala a textului si lungimea div-ului. Sectiunea de text ce depaseste lungimea div-ului va fi ascunsa cu ajutorul css utilizand atributul overflow:hidden;.

In final, vom declansa functia de scroll astfel:

window.onload function() { createScroll() }

In acest mod, functia createScroll() va fi apelata de fiecare data cand vizitam sau reincarcam pagina. Iata intreg codul javascript:

var i;
var pause;
    
pause=false;
i  = 1
 
function createScroll() {
 
    var div = document.getElementById("stiri");        
    var dif = (div.scrollWidth - div.offsetWidth);
    
    div.scrollLeft = i;
    
    if(dif == div.scrollLeft) {
        div.scrollLeft = 0
        i = 1
    }
    
    if(!pause) i = i + 1;
    setTimeout("createScroll()",25)
}
 
window.onload = function() { createScroll() }

2. Div-ul cu stiri

Atat div-ul, cat si tag-ul td, nu restrang textul din interior in functie de lungimea acestora datorita atributului nowrap. Acest lucru joaca un rol cheie in realizarea acestui scroll, deoarece permite ca textul ascuns (hidden) sa ramana pe aceeasi linie cu textul afisat.

Pentru a opri derularea textului, schimbam starea variabilei pause astfel: onmouseover="pause=true". La mouseout restabilim starea variabilei ca fiind false, iar derularea textului continua din locul in care a ramas. Iata codul html pe care l-am utilizat:

 
<html>
<head>
<title>Simple News Scroll</title>
<script src="simple-news-scroll.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div nowrap id="stiri">
    <table  width="100%"  onmouseover="pause=true" onMouseOut="pause=false">
        <tr>
            <td nowrap>In acest tutorial vei invata cum sa faci un <a href='http://mozzartut.isgreat.org/simple-scroll.php' target="_blank">scroll de stiri</a> in javascript. Pentru mai multe tutoriale intra pe <a href="#">http://mozzartut.isgreat.org</a> </td>
        </tr>
    </table>
</div>
</body>
</html>

Pentru a descarca sursele, inclusiv fisierul .css, acceseaza linkul Download din partea de sus a paginii.

Pagina:
1
comenteaza printeaza

Cuvinte cheie:   javacript,   scroll,   stiri,   div,   getElementById

Alte tutoriale Javascript:
Noteaza acest tutorial
Rating tutorial
 
(4 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (4) spune-ti parerea
duicuporcu , Marti, 29 Aprilie 2014, ora 00:04
#4

Cum pot face ca acest script sa mearga si pe platforma blogspot? Care este codul pentru inserarea lui pe blog? Va multumesc!

Raporteaza acest comentariu ca injurios!
satanakid , Marti, 29 Ianuarie 2013, ora 06:12
#3

ajutatima si pe mine va rog mult, nu pot sa il fac deloc :( ady_judo2009@yahoo.com . va rog mult , nush c e pot sa ii fac :(

Raporteaza acest comentariu ca injurios!
mozzartut mozzartut , Marti, 06 Decembrie 2011, ora 09:28
#2

Din css modifici, style.css

#stiri {

width: X px; (lungime)
height: Y px; (latime)

}

Raporteaza acest comentariu ca injurios!
mihai2008 , Sambata, 03 Decembrie 2011, ora 07:10
#1

Va ro ajutati-ma si pe mine, sunt incepatar in java.
Am folosit scrpiturile de mai sus si sunt foarte misto, singura problema a mea este ca nu stiu cum sa fac ca sa-mi apara caseta de text mai mare decat cea din scripturile astea.
Unde trebuie sa modific ca sa pot sa maresc caseta in care imi apar "stirile"?

Va multumesc anticipat pentru raspuns.

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4550
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4445
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4395
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4265
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4150
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Powerpoint Ruby on Rails Fotografie Excel Sony Vegas Lightroom Gimp PSD HTML Outlook JSON Fireworks RoR SWF Swift 3D Action Script Word AJAX XML Java Verilog CSS Photoshop COREL DRAW StyleSheet Python Javascript Illustrator PHP Dreamweaver XHTML SEO MySQL Flash Bridge Vista
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software