Belajar Jquery : memperbesar gambar ketika disentuh mouse
Belajar mouse event pada jQuery
selamat datang di arsipbertuah blog,pada belajar jquery kali ini ane menuliskan tentangbagaimana membuat gambar berubah ukurannya menjadi besar ketika di lalui oleh pointer mouse.
untuk mengubah ukuran gambar tersebut bisa menggunakan Javascript.tapi bisa lebih mudah kita gunakan javascript library yaitu JQuery. JavaScript sangat powerfull untuk memanipulasi element HTML, tapi penggunaannya juga tidak mudah dan sedikit ribet. oleh karena itu dengan jQuerylah yang dapat mempermudah memanipulasi HTML.
Pengertian Jquery
jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif.lansung saja kita terjun ke praktek. beriku ini adalah koding html untuk menampilkan gambar dan jquery sebagai aksi mempebesar gambar ketika disentuh mouse:
Contoh implementasi mouse event pada jquery
<html>
<head>
<title>belajar jquery mempebesar gambar kita dilalui mouse</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<script>
$(function(){
$('img').mouseenter(function(){
$('img').css('width','100%');
});
$('img').mouseleave(function(){
$('img').css('width','50');
});});
</script>
<div>
<img src="1.jpg" width="50px">
</div>
</body>
</html>
Contoh hasil mouse event jQuery
nah,hasilnya begini gan.jika agan buka lewat desktop silahkan letak penunjuk mouse agan di atas gambar dibawah ini .
seperti ini lah hasil dari fungsi mouse event jquery. dan masih banyak lagi yang bisa di kembangkan dari fungsi - fungsi yang ada pada jquery. buat agan yang tertarik menggunakan jquery alangkah baiknya agan instalasi jquery dengan mendownload jquery di website resminya, agar mudah mempelajari secara ofline.sekian penjelasan sederhana dari saya semoga dapat menambah wawasan tentang jquery.
Comments
Post a Comment
-Berkomentarlah yang baik dan rapi.
-Menggunakan link aktif akan dihapus.