Tidak ada bahan postingan, menyomot artikel orang deh :D Bermain dengan
Master @vagabundia tell about Jugando con jQuery y las imágenes de fondo Dengan posisi gambar yg sudah di patok atas-bawah kanan-kiri diberi bumbu script menjadi play image with jQuery (move and focus) :D
jQuery pluginsekitaran image. Sebuah gambar dengan resolusi cukup besar dapat dikecilkan dengan membubuhkan variabel width & height Agar terlihat lebih full stylish, dipadukan dengan jQuery script maka image dengan resolusi besar tadi walau sudah dibatasi dengan panjang & tinggi bisa terlihat ke sekitarnya! Lebih hebatnya ketika di klik akan focus gambar terlihat secara keseluruhan sesuai dengan pjg & lbr yg telah di tentukan.
Master @vagabundia tell about Jugando con jQuery y las imágenes de fondo Dengan posisi gambar yg sudah di patok atas-bawah kanan-kiri diberi bumbu script menjadi play image with jQuery (move and focus) :D
<script type='text/javascript'>
//<![CDATA[
$.fn.ejempol = function() {
$(this).each(function() {
var html = "<div class='c1' rel='left top'></div><div class='c2' rel='50% top'></div><div class='c3' rel='right top'></div><div class='c4' rel='left 50%'></div><div class='c5' rel='50% 50%'></div><div class='c6' rel='right 50%'></div><div class='c7' rel='left bottom'></div><div class='c8' rel='50% bottom'></div><div class='c9' rel='right bottom'></div>";
$(this).append(html);
var $this = $(this);
$this.click(function() {
$(this).toggleClass('covers');
});
$this.children().each(function(){
$(this).mouseover(function() {
var pos = $(this).attr('rel');
$this.css('background-position',pos);
})
$(this).mouseout(function() {
$this.css('background-position','50% 50%');
})
});
});
return $(this);
}
$(document).ready(function() {
$('.Zimage').ejempol();
})
//]]>
</script>
KODE CSS
Save. Lihat hasil kerja :)
Happy jQuery \m/
.Zimage {
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto;
margin: 0 auto;
position: relative;
cursor: move;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
.Zimage.covers { background-size: cover; }
.Zimage.covers div { display: none; }
.Zimage div {
height: 33%;
position: absolute;
width: 33%;
}
.c1 { left: 0; top: 0; }
.c2 { left: 33%; top: 0; }
.c3 { right: 0; top: 0; }
.c4 { left: 0; top: 33%; }
.c5 { left: 33%; top: 33%; }
.c6 { right: 0; top: 33%; }
.c7 { left: 0; bottom: 0; }
.c8 { left: 33%; bottom: 0; }
.c9 { right: 0; bottom: 0; }
MARKUP HTMLbackground-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto;
margin: 0 auto;
position: relative;
cursor: move;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
.Zimage.covers { background-size: cover; }
.Zimage.covers div { display: none; }
.Zimage div {
height: 33%;
position: absolute;
width: 33%;
}
.c1 { left: 0; top: 0; }
.c2 { left: 33%; top: 0; }
.c3 { right: 0; top: 0; }
.c4 { left: 0; top: 33%; }
.c5 { left: 33%; top: 33%; }
.c6 { right: 0; top: 33%; }
.c7 { left: 0; bottom: 0; }
.c8 { left: 33%; bottom: 0; }
.c9 { right: 0; bottom: 0; }
<div class="Zimage" style="width:500px;height:312px;background-image:url(LINK-IMAGE-HERE);"></div>
Gantikan link-image-here dengan link gambar.Save. Lihat hasil kerja :)
Happy jQuery \m/
Loading... |
5 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...