Cara Membuat Mobil Bergerak Menggunakan jQuery - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Responsive Ads Here

Monday, October 3, 2016

Cara Membuat Mobil Bergerak Menggunakan 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. 

No comments:

Post a Comment