Download Source Code Aplikasi

Scrolling Text Dengan Marquee

Monday, August 26th, 2019 - Artikel HTML, Artikel JavaScript

Membuat scrolling text anda dapat gunakan elemen MARQUEE. MARQUEE memiliki beberapa atribut, di antaranya behavior=["scroll" (default) | "slide" | "alternate"], direction=["left" | "right" | "up" | "down"], dst.

Artikel ini tidak membahas wacana bagaimana fungsi atribut-atribut dari MARQUEE, tetapi hanya misalnya saja.

Contoh berikut mengizinkan pengguna untuk menghentikan MARQUEE dikala MARQUEE di klik, dan dikala mouse dilepaskan maka MARQUEE akan berjalan kembali:

Ayo klik saya, tahan beberapa detik saja, kemudian lepaskan klik anda.

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ONMOUSEDOWN="this.stop();" ONMOUSEUP="this.start();">Ayo klik saya, tahan beberapa detik saja, kemudian lepaskan klik anda.</MARQUEE>

Contoh berikut mengizinkan pengguna untuk menghentikan MARQUEE dikala pointer mouse berada sempurna di atas MARQUEE, dan dikala pointer mouse keluar area MARQUEE maka MARQUEE akan berjalan kembali:

Silahkan MOUSEOVER di teks berjalan ini.

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ONMOUSEOVER="this.stop();" ONMOUSEOUT="this.start();">Silahkan MOUSEOVER di teks berjalan ini.</MARQUEE>

Contoh berikut mengizinkan pengguna untuk menghentikan MARQUEE dan menjalankan MARQUEE memakai tombol:

Silahkan tekan tombolnya!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan tekan tombolnya!</P> </MARQUEE> <INPUT TYPE="button" VALUE="Stop Marquee" ONCLICK="document.getElementById(‘oMarquee’).stop();"> <INPUT TYPE="button" VALUE="Start Marquee" ONCLICK="document.getElementById(‘oMarquee’).start();">

Contoh berikut mengizinkan pengguna untuk tetapkan warna teks MARQUEE sendiri:

Silahkan menentukan warna!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan menentukan warna!</P> </MARQUEE> <INPUT TYPE="color" VALUE="#000000" ONCHANGE="document.getElementById(‘oMarquee’).style.color=this.value;">

Contoh berikut mengizinkan pengguna untuk tetapkan latarbelakang MARQUEE sendiri:

Silahkan menentukan warna!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan menentukan warna!</P> </MARQUEE> <INPUT TYPE="color" VALUE="#000000" ONCHANGE="document.getElementById(‘oMarquee’).style.backgroundColor=this.value;">

Contoh berikut mengizinkan pengguna untuk tetapkan besar karakter untuk teks MARQUEE sendiri:

Silahkan menentukan ukuran teks saya!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan menentukan ukuran teks saya!</P> </MARQUEE> <INPUT TYPE="number" VALUE="13" ONCHANGE="document.getElementById(‘oMarquee’).style.fontSize=this.value+’px’;">

Contoh berikut mengizinkan pengguna untuk mengganti teks MARQUEE sendiri:

Silahkan ganti teks saya!

Kodenya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left" ID="oMarquee"> <P>Silahkan ganti teks saya!</P> </MARQUEE> <TEXTAREA ONCHANGE="document.getElementById(‘oMarquee’).innerHTML=this.value;">Tuliskan teks gres di sini!</TEXTAREA>

Jika ingin membuat scrolling image, tempatkan IMG di dalam MARQUEE, contohnya:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left"> <IMG SRC="myImage.png" WIDTH="100" HEIGHT="100"> </MARQUEE>
Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
Download Source Code Aplikasi
Scrolling Text Dengan Marquee | Ahmad Code | 4.5