Pernahkah anda mengakses suatu halaman website berita atau sejenisnya, lalu muncul tulisan berjalan yang terletak di atas atau di bawah website? Pada umumnya tulisan berjalan tersebut diisi dengan daftar berita, pengumuman, dan lain-lain. Bagi anda yang ingin membuatnya berikut akan saya share cara membuat tulisan atau teks berjalan pada halaman web dengan menggunakan javascript. Jika mouse di arahkan ke tulisan maka tulisan akan berhenti secara otomatis.
Berikut adalah source code nya :
<style type="text/css">
.marquee {position:relative;
overflow:hidden;
height:22px;
border:solid black 1px;
font-family:arial;
font-weight:bold;
font-size:8pt;
margin-top:3px;
color:white;
background-color:black;
-webkit-box-shadow: 4px 8px #222, -4px 0 8px #222;
-moz-box-shadow: 4px 0 8px #222, -4px 0 8px #222;
box-shadow: 4px 0 8px #222, -4px 0 8px #222;
}
.marquee span {white-space:nowrap;}
.marquee a {
color:white;
text-decoration: none;
}
.marquee a:focus {
color:white;
text-decoration: none;
}
.marquee a:active {
color:white;
text-decoration: none;
}
.marquee a:hover {
color:orange;
text-decoration: none;
}
</style>
<script type="text/javascript">
function start() {
new mq('m1');
mqRotate(mqr); // must come last
}
window.onload = start;
// Continuous Text Marquee
// copyright 30th September 2009by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
-moz-box-shadow: 4px 0 8px #222, -4px 0 8px #222;
box-shadow: 4px 0 8px #222, -4px 0 8px #222; "></div>
<div id="m1" class="marquee">LETAKKAN TULISAN BERJALAN DISINI</div>
Simpan Kode di atas di dalam file bernama tulisanberjalan.html
.marquee {position:relative;
overflow:hidden;
height:22px;
border:solid black 1px;
font-family:arial;
font-weight:bold;
font-size:8pt;
margin-top:3px;
color:white;
background-color:black;
-webkit-box-shadow: 4px 8px #222, -4px 0 8px #222;
-moz-box-shadow: 4px 0 8px #222, -4px 0 8px #222;
box-shadow: 4px 0 8px #222, -4px 0 8px #222;
}
.marquee span {white-space:nowrap;}
.marquee a {
color:white;
text-decoration: none;
}
.marquee a:focus {
color:white;
text-decoration: none;
}
.marquee a:active {
color:white;
text-decoration: none;
}
.marquee a:hover {
color:orange;
text-decoration: none;
}
</style>
<script type="text/javascript">
function start() {
new mq('m1');
mqRotate(mqr); // must come last
}
window.onload = start;
// Continuous Text Marquee
// copyright 30th September 2009by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
function objWidth(obj) {if(obj.offsetWidth) return obj.offsetWidth; if (obj.clip) return obj.clip.width; return 0;} var mqr = []; function mq(id){this.mqo=document.getElementById(id); var wid = objWidth(this.mqo.getElementsByTagName('span')[0])+ 5; var fulwid = objWidth(this.mqo); var txt = this.mqo.getElementsByTagName('span')[0].innerHTML; this.mqo.innerHTML = ''; var heit = this.mqo.style.height; this.mqo.onmouseout=function() {mqRotate(mqr);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = Math.ceil(fulwid/wid)+1; for (var i=0;i<maxw;i++){this.mqo.ary[i]=document.createElement('div'); this.mqo.ary[i].innerHTML = txt; this.mqo.ary[i].style.position = 'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px'; this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height = heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x = mqr[j].ary[i].style; x.left=(parseInt(x.left,10)-1)+'px';} var y = mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0) {var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',25);}
</script>
<div style="float:left; margin-top:3px; font-size:8pt; text-align:center; font-family:verdana; height:22px; width:300px; color:black; background:yellow; -webkit-box-shadow: 4px 8px #222, -4px 0 8px #222; -moz-box-shadow: 4px 0 8px #222, -4px 0 8px #222;
box-shadow: 4px 0 8px #222, -4px 0 8px #222; "></div>
<div id="m1" class="marquee">LETAKKAN TULISAN BERJALAN DISINI</div>
Simpan Kode di atas di dalam file bernama tulisanberjalan.html
Posting Komentar
Dilarang berkomentar dengan menggunakan kata-kata kotor, tidak senonoh, & mengandung unsur pornografi. Komentar yang tidak mematuhi etika akan diblok & dihapus. Terimakasih