bewoksatukosong.com | halo semua balik lagi dengan om bewok, kali ini om bewok akan membuat Cara Membuat Mobil Bergerak Menggunakan jQuery, sebenarnya ini hal yang mudah dilakukan, kalau kita pelajari dasarnya terlebih dahulu.Yang kita perlukan adalah
1. Download jQuery, kamu bisa download di jquery.com
2. Download gambar mobil, bisa kamu save dibawah ini
 |
| Save, lalu beri nama mobil2.gif |
Oke kodinganya seperti dibawah ini ya
<!DOCTYPE html>
<html>
<head>
<title>mobil berjalan</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#jalan").click(function(){
$("#mobil").animate({left:"700px"}, "slow");
});
});
</script>
<style type="text/css">
#mobil {
position: relative;
}
</style>
</head>
<body>
<img src="mobil2.gif" id="mobil"/>
<br/>
<button id="jalan">Jalan</button>
</body>
</html>
Kalian harus mencoba sendiri ya biar keliatan mobil bergeraknya, kalau om bewok ga bisa nunjukin soalnya hanya gambar, kalau kita klik jalan maka mobil tersebut akan jalan.
Oke seperti biasa kita akan bahas satu - persatu
1. $(document).ready(function(){
2. $("#jalan").click(function(){
3. $("#mobil").animate({left:"700px"}, "slow");
4. });
5. });$(document).ready(function(){
Maksudnya kita sudah siap melakukan aksi
Kode yang kedua
$("#jalan").click(function(){
Artinya kita memanggil ID jalan yang mana itu adalah button id, lalu ketika klik #jalan maka lanjut kode yang ketiga, bahwa ID #mobil yang mana itu ID mobil berasal dari img artinya gambar mobil yang akan bergerak dari kiri ke kanan sepanjang 700px dengan slow, jadi kalau kamu ubah 700 px menjadi lebih kecil maka semakin pendek jarak tempuhnya.
Oke itu saja Tutorial Cara Membuat Mobil Bergerak Menggunakan jQuery. Semoga Bermanfaat
No comments:
Post a Comment