Aşağıdaki kodu kayan yazının çıkmasını istediğiniz yere koyunuz. İçine istediğiniz kadar div ekleyebilirsiniz. Her biri bir önceki div içindeki yazı bittikten sonra geçecektir. Yazılara span etiketi ile stil verebilirsiniz.
Bu yöntem her browserla uyumlu olduğu gibi web standartlarına da uygundur.
[syntax="html"]<script type="text/javascript" src="scr.js"></script>
<div id="scr">
<div><b><font color="#003399">Yazmak istedikleriniz</font></b>
<span style="background-color: #99FFCC">Yazmak istedikleriniz</span></div>
<div><b><font color="#003399">Yazmak istedikleriniz</font>
<span style="background-color: #99FFCC">Yazmak istedikleriniz</span></b></div>
</div>
[/syntax]
scr.js[syntax="javascript"]/* Script to create a scrolling text news box. Takes teh news you give it and scrolls
those items across the screen for your users to see
Based on newsticker by
www.fczbkk.sl/js/newsticker/ */
// run init when the window loads.....
addEvent(window, "load", init);
function init() {
if (document.getElementById) {
tck = document.getElementById("scr");
if (tck.getElementsByTagName("div").length > 0) {
actual = 0;
step = 2;
speed = 15;
delay = 1000;
news = new Array();
// build an array of news - eg every seperate div provided in the div with
// id = "all".
for (i = 0; i < tck.getElementsByTagName("div").length; i++) {
news[i] = tck.getElementsByTagName("div")[i];
news[i].style.left = tck.offsetWidth;
}
// start the news rolling ....
rollNews();
// add listeners for when mouse goes over tck to stop and when it leaves
// tck to start again
addEvent(tck, "mouseover", stopNews);
addEvent(tck, "mouseout", rollNews);
}
}
}
function rollNews() {
// move left edge to left a bit
news[actual].style.left = parseInt(news[actual].style.left) - step + "px";
if (parseInt(news[actual].style.left) == tck.offsetWidth % step) {
// if that movement hasnt taken us off the edge of the div then wait
// a bit and move it again.
tick = setTimeout("rollNews()",delay);
}
else {
// if it has taken us over the edge then move to the next item in news array
if (parseInt(news[actual].style.left) <= 0-news[actual].offsetWidth) {
actual++;
// if at end of array then knock it back to start
if (actual == news.length) {actual = 0;}
news[actual].style.left = tck.offsetWidth;
}
// wait a bit and try again.
tick = setTimeout("rollNews()",speed);
}
}
function stopNews() {
clearTimeout(tick);
}
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}[/syntax]
Hali hazırda bir stil şemanız (css) varsa aşağıdaki kodu içine ekleyiniz.
[syntax="css"]#scr {
height: 20px;
width: 100%;
position: relative;
overflow: hidden;
}
#scr div {
position: absolute;
white-space: nowrap;
}
[/syntax]
Stil şemanız yoksa yukarıdaki kodu css uzantılı olarak kaydedip (scr.css gibi) kayan yazının gözükeceği sayfalarda <head></head> tagları arasına aşağıdaki kodu ekleyiniz.
[syntax="html"]<link rel="stylesheet" href="scr.css" type="text/css">
[/syntax]