Cara Membuat Mobil Bergerak Menggunakan jQuery

bewoksatukosong 12:57:00 AM #jquery, jquery,

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

3. Lalu buat 1 folder, Isinya adalah jquery.js, mobil2.gif dan mobil.html

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>

Maka Hasilnya seperti dibawah ini.

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.  });

Oke untuk kode yang pertama

$(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