Membuat text berjalan dengan Jquery

September 08, 2013


Bagi yang ingin menyisipkan text berjalan baik pada postingan maupun sidebar sebaiknya kita menggunakan jquery, karena lebih halus perpindahan (jalannya text) dari pada dengan marque.. Untuk contohnya ada pada blog ini dibawah slider.

ini kodingnya tinggal mengganti kalimat atau warna Backgroundnya jika ada yang tertarik, marque ini selain berisi text yang berjalan juga disisipi emot dari yahoo agar lebih menarik untuk dibaca.

<script language="JavaScript1.2">
var marqueewidth="400px" // lebar text
var marqueeheight="25px" // tinggi text
var marqueespeed=1 // kecepatan jalan text
var marqueebgcolor="#24B200" // warna dasar text
var pauseit=1 // nilai satu text akan berhenti jika disentuh mouse.

var marqueecontent='<nobr><font face="Arial"><span style="color: white;">Thank you for your care mom, I luv you so much  <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=18 height=18 border=0></span</font></nobr>'

marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee
function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate
function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

You Might Also Like

0 Comments

» Komentar anda sangat berguna untuk peningkatan mutu posting
» Terima kasih bagi yang sudah menulis komentar.

SUBSCRIBE NEWSLETTER

Get an email of every new post! We'll never share your address.

Flickr Images