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.
1 Komentar
Saya sudah membaca bukunya,
BalasHapuswawasan saya jadi makin bertambah dalam membuat website.
Terimakasih...