Hai Sobat kali ini saya mau share tentang Jquery Nih, kali ini tentang
efek ledakan yang dahsyat pada sebuah foto atau image hehehe seperti apa
efeknya Cek it Dot
Kurang lebih seperti itu efeknya gan Gimana Apa ada yang tertarik ..........??
Ok Langsung Aja ke Tutornya :
1. Masuk di blog
2. klik rancangan
3. klik tambah gadget
4. klik html/javascript
5. masukan kode di bawah ini di dalamnya
Perhatikan kode berwarna biru dengan merah
biru : itu adalah kode gambar saat di klik jika anda ingin gambarnya meledak tanpa di klik
( hanya di sorot cursor meledak ) ganti
merah : itu adalah url gambar silahkan ganti dengan url gambar anda sendiri setelah itu klik SIMPAN, dan lihat hasilnya.
semoga bermanfaat
Kurang lebih seperti itu efeknya gan Gimana Apa ada yang tertarik ..........??
Ok Langsung Aja ke Tutornya :
1. Masuk di blog
2. klik rancangan
3. klik tambah gadget
4. klik html/javascript
5. masukan kode di bawah ini di dalamnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#hide").click(function(){
$(".meledak").hide("explode", {pieces:36}, 2000);});
$("#show").click(function(){
$(".meledak").show("bounce", {direction:"up", times:4}, 200);});
});
</script>
<style>
.meledak{
margin-left:150px;
}
.meledak img{
background:#333;
border:5px solid #222;box-shadow:0 0 5px 2px #00f;
}
#show{
text-align:center;
}
</style>
<button id="show">Kembalikan gambarnya!!!</button>
<div class="meledak">
<div id="hide">
<img src="http://infogres.com/wp-content/uploads/2011/10/ayu_ting_ting.jpg"/></div>
</div>
Perhatikan kode berwarna biru dengan merah
biru : itu adalah kode gambar saat di klik jika anda ingin gambarnya meledak tanpa di klik
( hanya di sorot cursor meledak ) ganti
.click menjadi .hovermerah : itu adalah url gambar silahkan ganti dengan url gambar anda sendiri setelah itu klik SIMPAN, dan lihat hasilnya.
semoga bermanfaat
