Bagaimana Caranya Membuat Efek Memantul Pada jQuery - Royal Writers Website - Buku Komputer | Tutorial IT | Bisnis Online | jalan-jalan

Latest

Selasa, 22 Januari 2019

Bagaimana Caranya Membuat Efek Memantul Pada jQuery


JQuery UI selain dapat membuat efek warna dan explode, juga dapat anda gunakan unruk membuat efek memantul atau lebih sering disebut efek bounce.
Ketika membuat efek bounce, paling tidak anda harus memanggil library bounce seperti listing di bawah ini:

<script src="development-bundle/ui/jquery.effects.bounce.js">
</script>
Untuk memulai membuat efek bounce, anda siapkan gambar dan simpan di dalam folder images. Setelah itu anda dapat mengetikkan listing bounce.html seperti listing di bawah ini.

<html>
  <head>
   
<link type="text/css" href="development-bundle/themes/excite-bike/jquery.ui.all.css" rel="stylesheet" />  
<script  src="development-bundle/jquery-1.4.2.js"></script>
<script src="development-bundle/ui/jquery.effects.core.js"></script>
<script src="development-bundle/ui/jquery.effects.bounce.js">
</script>

<style>
#ball { position:relative; top:150px; }
</style>

<script>
$(function() {
$("#ball").click(function() {
$(this).effect("bounce", { distance: 140 });
});
});
</script>

</head>
<body>
<p>Klik Bola Agar Memantul!</p>
<div id="ball"><img src="images/ball.png"></div>
</body>
</html>

Jika telah usai membuat listing bounce.html, anda dapat melihatnya di dalam web browser dan akan ditampilkan sebuah gambar bola(sesuai gambar yang disimpan di dalam floder images). JIka dilakukan aksi/klik pada gambar tersebut, maka bola akan memantul-mantul sesuai dengan distance yang telah anda atur yaitu 140.



Tidak ada komentar:

Posting Komentar