EFEK MINIATUR DENGAN ZOOM DAN SLIDING KETERANGAN

Karena efek sorotan thumbnail saya menulis tutorial tentang itu dan masih luar biasa populer saya memutuskan untuk membuat efek lain thumbnail keren. Kali ini dengan zoom dan keterangan geser. Bagaimana menggunakannya? Arahkan kursor ke gambar dan Anda akan melihat efek. Contoh Efek Miniatur Dengan Zoom Dan Sliding Keterangan, klik disini,, CSS ::

 . ThumbnailWrapper {width: 600 px; margin: 0px auto;} / * tidak penting * / thumbnailWrapper ul {. list-style-type: none; / * menghapus gaya default untuk item daftar (lingkaran) * / margin: 0px ; / * menghapus standar marjin * / padding: 0px; / * menghapus standar bantalan * / }thumbnailWrapper ul li {. float: left; / * penting: kiri mengapung * / position: relative; / * jadi kita dapat menggunakan atas dan kiri positioning * / overflow: hidden; / * menyembunyikan isi di luar batas (ZOOM) * / } thumbnailWrapper ul li a img {. width: 200 px; / * tidak penting, pics kita gunakan di sini terlalu besar * / posisi: relatif; / * jadi kita dapat menggunakan posisi atas dan kiri * / border: none; / * menghapus perbatasan standar biru * / } caption {. position: absolute; / * dibutuhkan untuk posisi * / bawah: 0px; / * bawah item daftar (kontainer) * /kiri: 0px; / * mulai dari kiri item daftar (kontainer) * / width: 100%; / * peregangan untuk seluruh lebar kontainer * / display: none; / * hide oleh * default / / * styling bawah * / ;: background RGBA (0,0,0,0.8) ; putih: warna } captionInside caption {.. / * hanya styling * / padding: 10px; margin:; 0px } keterangan p. { text-align: center; font-size: 110%; } jelas {clear: both;}. / * untuk membersihkan mengapung setelah item terakhir * /

SCRIPT ::

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'> </ script>

<jenis skrip = "text / javascript "charset =" UTF-8 ">
$ (window) beban (function () {.
/ / set dan mendapatkan beberapa variabel
var thumbnail = {
imgIncrease: 100 , / * peningkatan gambar dalam piksel (untuk zoom) * /
effectDuration : 400 , / * durasi efek (zoom dan keterangan) * /
/ *
. mendapatkan lebar dan tinggi gambar Pergi untuk menggunakan mereka
untuk 2 hal:
membuat daftar item ukuran yang sama
mendapatkan gambar kembali normal setelah zoom
* /
. imgWidth: $ ('. thumbnailWrapper ul li') find ('img') lebar (),.
imgHeight:.. $ ('. thumbnailWrapper ul li') find ('img') tinggi ()
}; / / membuat daftar item ukuran yang sama dengan gambar $ ('ul li thumbnailWrapper.') css ({. 'lebar': thumbnail.imgWidth, 'tinggi': thumbnail.imgHeight }); / / ketika mouse di atas item daftar ... $ ('. thumbnailWrapper ul li'). melayang-layang (function () { $ (ini). menemukan ('img'). stop (). bernyawa ({ / * meningkatkan lebar gambar untuk efek zoom * / width: parseInt (thumbnail.imgWidth) + thumbnail.imgIncrease, / * kita perlu mengubah posisi kiri dan atas untuk memiliki efek zoom, jadi kami memindahkan mereka ke negatif posisi setengah dari imgIncrease * / kiri : thumbnail.imgIncrease / 2 * (-1), atas: thumbnail.imgIncrease / 2 * (-1) }, { "durasi": thumbnail.effectDuration, "antrian": false }); / / menampilkan caption menggunakan slideDown acara . $ (ini) find ('caption: tidak (: animasi).') slideDown (thumbnail.effectDuration);. / / ketika mouse meninggalkan ... }, function () { / / cari gambar dan bernyawa itu. .. $ (ini) find ('img') menghidupkan ({.. / * mendapatkannya kembali ke ukuran aslinya (zoom out) * / width: thumbnail.imgWidth, / * mendapatkan kiri dan atas posisi kembali normal * / kiri : 0, top: 0 }, thumbnail.effectDuration); / / menyembunyikan caption menggunakan acara slideUp $ (ini) find ('keterangan.') slideUp (thumbnail.effectDuration);.. }); }); </ script >

HTML ::

 <-! Memulai thumbnailWrapper ->
<div class='thumbnailWrapper'>
<ul>
<li> <a href='#'> <img src = 'http://web.enavu.com/demos/thumbnailZoom/ images/1.jpg '/> </ a>
<div class='caption'>
<p class='captionInside'> CofeeNerd </ p>
</ div> </ li> <li> <a href = '# '> <img src='http://web.enavu.com/demos/thumbnailZoom/images/2.jpg' /> </ a> <div class='caption'> <p class='captionInside'> musiKings </ p> </ div> </ li> <a <li> href='#'> <img src='http://web.enavu.com/demos/thumbnailZoom/images/3.png' /> </ a> <div class='caption'> <p class='captionInside'> The Caribbean Energy Conference 2010 </ p> </ div> </ li> <a <li> href='#'> <img src = 'http://web.enavu.com/demos/thumbnailZoom/images/4.jpg' /> </ a> <div class='caption'> <p class='captionInside'> kopi </ p> </ div> </ li><a <li> href='#'> <img src='http://web.enavu.com/demos/thumbnailZoom/images/5.jpg' /> </ a> <div class='caption'> <p class='captionInside'> Quantum </ p> </ div> </ li> <a <li> href='#'> <img src = 'http://web .enavu.com/demos/thumbnailZoom/images/6.png '/> </ a> <div class='caption'> <p class='captionInside'> Cinta Tak Terbatas </ p> </ div> </ li > <li> <a href='#'> <img src='http://web.enavu.com/demos/thumbnailZoom/images/7.jpg' /> </ a> <div class = 'caption' > <p class='captionInside'> Fathom </ p> </ div> </ li> <a <li> href='#'> <img src = 'http://web.enavu.com/demos/ thumbnailZoom/images/9.PNG '/> </ a> <div class='caption'> <p class='captionInside'> Campuran Pome </ p> </ div> </ li> <li> <a href = '#'> <img src='http://web.enavu.com/demos/thumbnailZoom/images/10.jpg' /> </ a> <div class='caption'> <p class = 'captionInside '> Golf Lessons Online </ p> </ div> </ li> <div class='clear'> </ div> <-! jelas float -> </ ul> </ div> <! - - end spolightWrapper ->

Semoga bermanfaat yaa,, ^ ^

Sumber

sumber 2