Membuat perbesar dan perkecil gambar dengan javascript

Membuat perbesar dan perkecil gambar dengan javascript
Di Posting Oleh : Wandi febriandi
Kategori : Pelajaran Pemprograman web

selamat datang kawan kawan di blog saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarnya kawan ? mudah mudahan sehat amin . di artikel sebelumnya saya telah berbagi mengenai lebih mudah berbuat baik atau jahat , mau tau jawabannya baca sini . Di artikel sebelumnya juga saya telah berbagi mengenai cara membuat menu responesive .

Oke kalo yang sebelumnya mengenai css sekarang kita mengenai javascript . sekarang kita mau belajar apa ? belajar membuat perbesar dan perkecil gambar dengan javascript . sulit gak bro ? ya gaklah karena cuman butuh beberapa ketika saja beres . oke lanjut pertama kalian siapkan gambar terlebih dahulu . kalo sudah mari kita buat scriptnya .

pertama kita buat dulu script htmlnya

Oke kalo sudah buat html nya kita design dulu menggunakan css agar telihat bagus

Oke kalo sudah html dan css kita langsung lari ke javascript

saya akan sedikit menjelaskan pertama misal kita mengklik +(tambah) maka akan melakukan fungsi perbesar() di sana ada proses tambah = tambah + 20 jadi tambah sekarang adalah 120 ada if karena tidak memenuhi langsung ke id yang gambar style lebar sama tingginya di ubah jadi tambah+"%"; artinya lebar dan tinggi kita sekarang jadi 120% .

Oke kalo kalian ingin scriptnya langsung full ini .

<!DOCTYPE html><html>  <head>    <style>    /*     catatanwandicager.blogspot.com     */     #pembungkus{       position: relative;       width: 200px;       height: 200px;     }     #pembungkus img{       width: 100%;       height: 100%;       transition: width 1s,height 1s;     }     #pembungkus2{       position: absolute;       top: 0;       right: 0;       color: #fff;       font-size: 20px;       background-color: rgba(0, 0, 0, 0.5);       width: 50px;       height: 150px;       text-align: center;       display: none;     }      #pembungkus3{       position: absolute;       top: 100%;       left: 0;       font-size: 15px;       background-color: rgba(0, 0, 0, 0.5);       width: 204px;       height: 50px;       color: #fff;       text-align: center;       display: none;     }     #pembungkus:hover #pembungkus2{       display: block;       cursor: pointer;     }     #pembungkus:hover #pembungkus3{       display: block;       cursor: pointer;     }     </style>  </head>  <body>    <div id="pembungkus">      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA42SsTLpJVeasqE1ZcWXESpn-b4ckOi7DZOM-JFJQFUsCQwjtyvW2X1-0K6_b0CYsXGqfv4HyYJIvYhe0C-S8PUPwTgVTyNEp7RAM-FMgKXerBLsoPh4JlusFbmAf3PhOm56oON-hvU4/s1600/js1_0.png"       id="gambar" />      <div id="pembungkus2">      <p onclick="perbesar();">+</p><p onclick="perkecil();">-</p><p onclick="awal();">awal</p></div><div id="pembungkus3">      <p>catatanwandicager.blogspot.com</p></div></div><script>    var tambah = 100;       function perbesar() {         tambah = tambah + 20;         if(tambah>=200){           tambah=200;         }         var gammbar = document.getElementById('gambar');         gammbar.style.width = tambah+"%";         gammbar.style.height = tambah+"%";       }       function perkecil() {           tambah = tambah - 20;           if(tambah<=100){             tambah=100;           }           var gammbar = document.getElementById('gambar');           gammbar.style.width = tambah+"%";           gammbar.style.height = tambah+"%";         }         function awal() {           var gammbar = document.getElementById('gambar');           gammbar.style.width ="100%";           gammbar.style.height ="100%";         }     </script>  </body></html>

hasil jadinya kaya gininih

Oke itu dia semoga berbermanfaat dan juga menambah ilmu . jangan lupa like fans page kami dan share artikel ini . sampai jumpa di artikel yang lainnya tentunya yang lebih menarik dan juga bermanfaat .

Silahkan kunjungi blog terbaru saya disini

Kokodean

Sunday, April 17, 2016

Membuat perbesar dan perkecil gambar dengan javascript

No comments:

Post a Comment

Labels