Scroller teks 2

Demo :




Cara membuatnya

Penempatannya
dibawah <body>
........
diatas </body>


<script type='text/javascript'>
//<![CDATA[

/*
Pembuat Script oleh JavaScript Kit http://www.javascriptkit.com/script/script2/highlight2.shtml
*/

//Isi pesan anda :
var tickercontents=new Array()
tickercontents[0]='Selamat Datang di Blog Nano Yulianto !'
tickercontents[1]='Blog yang sangat sederhana'
tickercontents[2]='Hanya berbagi kepada Sahabat Blogger yang ingin mencari tutorial Blogger'

var tickerwidth="99%" //lebarnya
var tickerheight="100px" //tingginya
var fontcss="text-align:center; font: bold 20px Verdana; color:black" //gaya teks
var tickdelay=3000 //penundaan setiap pesan
var highlightspeed=2 //kecepatan
var highlightcolor="lightyellow" //warna background
var backdroptextcolor="#666666" //warna teks sebelum tertutup background

////Do not edit pass this line////////////////

document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')
document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+'; height:'+tickerheight+';'+fontcss+'">')
document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0;color:'+backdroptextcolor+'; width:'+tickerwidth+'; height:'+tickerheight+';padding: 4px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background-color:'+highlightcolor+'; width:'+tickerwidth+';height:'+tickerheight+';padding: 4px"></span>')
document.write('</div>')

var currentmessage=0
var clipbottom=1

function changetickercontent(){
msgheight=clipbottom=crosstick.offsetHeight
crosstick.style.clip="rect("+msgheight+"px auto auto 0px)"
crosstickbg.innerHTML=tickercontents[currentmessage]
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}

function highlightmsg(){
//var msgheight=crosstick.offsetHeight
if (clipbottom>0){
clipbottom-=highlightspeed
crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipbottom=msgheight
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}

function start_ticking(){
crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}

if (document.all || document.getElementById)
window.onload=start_ticking

//]]>
</script>



Credit : JavaScript Kit

Alhamdulillah

0 comments:


Posting Komentar


Creative Commons License
Scroller teks 2 by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/01/scroller-teks-2.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.