|
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.
|
