Dalam percobaan kecil ini kami membuat meja foto interaktif yang menyediakan beberapa "realistis" kemungkinan interaksi bagi pengguna. Idenya adalah untuk memiliki beberapa foto pada permukaan yang dapat menyeret dan menjatuhkan, ditumpuk dan dihapus, setiap tindakan menyerupai tindakan dunia nyata. Sebagai contoh, jika kita tarik gambar, pekerjaan itu akan "mengambil" pertama, sehingga muncul sedikit lebih besar, karena akan lebih dekat kepada kita. Menjatuhkan itu menghasilkan gambar yang "dilemparkan kembali" ke meja, dalam rotasi acak. Melihat semua foto mencerminkan aksi mengumpulkan semua gambar ke dalam tumpukan dan melihat yang pertama dalam tidak ada cara diputar. Mengklik untuk melihat yang berikutnya kemudian, membuat yang sebelumnya dilemparkan kembali ke permukaan. Menghapus gambar akan membuatnya tampak sebagai bola kertas kusut. Bila menggunakan fungsi shuffle, foto-foto bisa diputar dan tersebar di meja secara acak. Anda dapat men-download kode sumber ini dan bereksperimen dengan itu, ada banyak kemungkinan untuk menemukan dan mengintegrasikan. Kami menggunakan dua plugin jQuery penting:. 2D Transform untuk menghidupkan rotasi dan Shadow Animasi untuk menghidupkan kotak bayangan . Foto-foto tersebut diambil dari photostream menakjubkan tibchris di Flickr rotasi tidak bekerja dengan baik dengan IE (walaupun pada prinsipnya seharusnya) sehingga kita tidak memutar ketika IE digunakan. Kami harap Anda menikmati ini eksperimen kecil! CSS ::
# Gallerybox {width: 700px ; height: 500px ; margin: 0 auto; position: relative; border: 1px solid # fff; box-shadow: 0px 0px 5px # eee;-moz-box-shadow: 0px 0px 5px # eee; -webkit-box-shadow: 0px 0px 5px # eee;}
a.pd_next_photo,
a.pd_loading {z-index: 999999; kursor: pointer; border: 1px solid # aaa; width: 50px; height: 50px; position: absolute , atas: 50%; kiri: 50%; opacity: 0.8; margin: 0px 0px 25px-
url (http://tympanus.net/Development/PhotoDesk/images/loading.gif) no-repeat 50% 50%;}
a.pd_next_photo {background: # B8B8B8 url (http://tympanus.net/Development/PhotoDesk / images / next.png) no-repeat 50% 50%;}
a.pd_next_photo: hover,
a.pd_loading: hover {opacity: 1.0;}
. pd_options_bar a.viewall,
pd_options_bar a.shuffle,.
pd_options_bar a.backdesk.
{outline: none; padding: 0px 15px 0px 50px; line-height: 47px; text-decoration: none; font-size: 24px; color: # 333; text-shadow: 1px 1px 1px # f0f0f0; height: 50px; mengambang : right; margin: 5px 10px 0px 0px;-moz-box-shadow: 1px 1px 2px # 666;-webkit-box-shadow: 1px 1px 2px # 666, box-shadow: 1px 1px 2px # 666, opacity: 0.8; -moz-border-radius: 8px;-webkit-border-radius: 8px; border-radius: 8px;}
. pd_options_bar a.viewall {background: # f6f6f6 url (http://tympanus.net/Development/PhotoDesk/images / viewall.png) no-ulangi 10px 50%;}
. pd_options_bar a.shuffle {background: # f6f6f6 url (http://tympanus.net/Development/PhotoDesk/images/shuffle.png) no-repeat 10px 50%; }
pd_options_bar a.backdesk {background: # f6f6f6 url (http://tympanus.net/Development/PhotoDesk/images/backdesk.png) no-repeat 10px 50%;}.
. pd_options_bar a.viewall: hover,
. pd_options_bar a . shuffle: hover,
pd_options_bar a.backdesk: hover.
{opacity: 1.0; text-shadow: 1px 1px 1px # fff;-moz-box-shadow: 1px 1px 2px # fff;-webkit-box-shadow: 2px 1px 1px # fff; box-shadow: 2px 1px 1px solid # f6f6f6; border-bottom: 28px solid # f6f6f6; width: 180px; height: 180px; top: 0px; kiri: 0px; display: none;-moz-box-shadow: 1px 1px 5px # 555;-webkit-box -shadow: 1px 1px 5px # 555, box-shadow: 1px 1px 5px # 555;-moz-border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px;} . pd_photo img, # gallerybox img {width: 180px; height: 180px;} . pd_photo url (http://tympanus.net/Development/PhotoDesk/images/close.png) pusat pusat tidak mengulang-;-moz-border-radius: 0px 8px 8px 1px 5px # 555;-webkit-box-shadow: 1px 1px 5px # 555, box-shadow: 1px 1px 5px # 555;} pd_paperball {background: url transparan (http://tympanus.net/Development/PhotoDesk/images. / paperball.png) tidak mengulang-center center; position: absolute;}
SCRIPT ::
<-! The JavaScript -> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script> <skrip src = " http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js "> </ script> <skrip src = "http://tympanus.net/Development/PhotoDesk/ jquery.transform-0.6.2.min.js "> </ script> <script src="http://tympanus.net/Development/PhotoDesk/jquery.animate-shadow-min.js"> </ script> < Jenis naskah = "text / javascript"> $ (function () {var idx, idxLarge = -1; var mouseup = false; var photoW = 184; var photoH = 205; var $ kontainer = $ ('# pd_container'); var $ options = $ ('# pd_options_bar');. var photosSize = $ container.find ('. pd_photo') panjang; var navPage = 0; var yaitu = false; jika (. $ browser.msie) {yaitu = true } start ();. fungsi start () {$ ('# pd_loading') menunjukkan (); var tableW = $ container.width (); var tableH = $ container.height (); var horizontalMax = tableW-photoW; var attr $ ('<img />') ('src', 'images / paperball.png');, verticalMax = tableH-photoH. var cntPhotos = 0; $ container.find ('pd_photo.') masing-masing (fungsi. (i) {var $ foto = $ (ini);. $ ('<img />') beban (function () {+ + cntPhotos, var $ gambar = $ (ini); var r = Math.floor (Math random () * 201) -100,. var maxzidx = parseInt (findHighestZIndex ()) +1; var mouseDown ($ foto) {mouseup = true; idx = $ photo.index () +1; var maxzidx = parseInt (findHighestZIndex ()) +1; $ photo.css ('z-index', maxzidx), jika (yaitu ) var param = {'lebar': '+ = 40px', 'height': '+ = 40px'}; lain var param = {'lebar': '+ = 40px', 'height': '+ = 40px' , 'memutar': '0 deg ',' bayangan ': '5 px 5px 15px $ Foto = $ container.find ('pd_photo: n-anak (.' + Idx + ')'); var r = Math.floor (Math.random () * 101) -50, var $ photoT = parseFloat ($ foto css ('top'), 10);. var $ photoL = parseFloat ($ photo.css ('kiri'), 10); var newTop = $ photoT + r, var newLeft = $ photoL + r, jika (yaitu) var param = {'lebar': '- = 40px', 'height': '- = 40px', 'top': newTop + 'px', 'kiri': newLeft + 'px'}; lain var 0 5px $ Foto = $ (ini) orangtua ();. Var $ photoT = parseFloat ($ photo.css ('top'), 10); var $ photoL = parseFloat ($ photo.css ('kiri'), 10); var $ photoZIndex = $ photo.css ('z-index'); var $ sampah = $ ('<div tumpukan () {navPage = 0; var cnt_photos = 0; var windowsW = $ (window) Lebar ();. var windowsH = $ (window) tinggi ();. $ container.find ('. pd_photo') masing-masing (. function (i) {var $ Foto = $ (ini); $ photo.unbind ('mousemove'); + + cnt_photos, var $ nav = $ ('<a class = "pd_next_photo" memperbesar ($ foto) {var windowsW = $ (window) Lebar ();.. var windowsH = $ (window) tinggi (), jika (yaitu) var var 5px 15px # 222 '}; $ photo.animate (param, 500, function () {idxLarge = $ (ini) indeks ();. Var membubarkan () {var windowsW = $ (window) Lebar ();. var windowsH = $ (window) tinggi ();. $ container.find ('pd_photo.') masing-masing (function (i) {var $ foto =. $ (ini), jika ($ photo.index () == idxLarge) {if (yaitu) var var 5px 1px $ Foto = $ (ini) orangtua ();. MouseDown ($ foto); e.preventDefault ()})} function menavigasi () {if (photosSize == 0) return; var tableW = $ container.width (); var tableH = $ container.height (); var horizontalMax = tableW-photoW, var verticalMax = tableH-photoH, var $ foto = $ container.find ('pd_photo:. n-anak (' + parseInt (idxLarge +1) + ')'); var r = Math.floor (Math.random () * 201) -100, jika (yaitu) var var 1px 5px # 555 '};. $ Photo.stop (benar) bernyawa (param, 500, function () {+ + navPage; var mengocok () {var tableW = $ container.width (); var tableH = $ container.height (); var horizontalMax = tableW-photoW, var verticalMax = tableH-photoH,. $ container.find ('. pd_photo') masing-masing (function (i) {var $ foto = $ (ini); var r = Math.floor (Math.random () * 301) -100, jika (yaitu) var varfindHighestZIndex () {var Foto = $ container.find ('pd_photo.'); var tertinggi = 0; photos.each (function () {var $ foto = $ (ini); var ZIndex = $ photo.css ('z -index '), jika (parseInt (ZIndex)> tertinggi) {tertinggi = ZIndex}});} function return tertinggi findElementHighestZIndex () {var Foto = $ container.find (' pd_photo ');. var tertinggi = 0; var $ elem; photos.each (function () {var $ foto = $ (ini); var ZIndex = $ photo.css ('z-index'), jika (parseInt (ZIndex)> tertinggi) {tertinggi = ZIndex; $ elem = $ foto}});} return $ elem Array.prototype.remove = function (dari, untuk) {var sisanya = this.slice ((untuk | | dari) 1 | | this.length); this.length ? = dari <0 this.length + dari: dari, kembali this.push.apply (ini, sisanya)}}); </ script>
HTML ::
<div id='gallerybox'>
<div> <a id="pd_loading" href="#" class="pd_loading"> </ a> </ div>
<div id="pd_options_bar" class="pd_options_bar">
<a href="" class="shuffle"> Shuffle </ a>
<a href="" class="backdesk" style="display:none;"> Kembali ke Meja </ a>
<a href = "" class = "viewall"> Lihat Semua </ a>
</ div>
<div id="pd_container" class="pd_container"> <div class="pd_photo"> <div class="pd_hold"> <img src = " http://favim.com/orig/201105/17/baby-baby-girl-beautiful-child-cute-girl-Favim.com-48227.jpg "alt =" "/> </ div> <rentang class = "menghapus"> </ span> </ div> <div class="pd_photo"> <div class="pd_hold"> <img src = "http://data.whicdn.com/images/35398355/face-cute -girl-nina-Dobrev-rambut-lihat-photos_large.jpg "alt =" "/> </ div> <span class="delete"> </ span> </ div> <div class="pd_photo"> < div class = "pd_hold"> <img src = "http://s2.favim.com/orig/35/asian-asian-girl-cute-free-girl-Favim.com-281584.jpg" alt = "" /> </ div> <span class="delete"> </ span> </ div> <div class="pd_photo"> <div class="pd_hold"> <img src = "http://parttimebkk2556.files .wordpress.com/2012/12/cute-korean-girls02.jpg "alt =" "/> </ div> <span class="delete"> </ span> </ div> <div class = "pd_photo" > <div class="pd_hold"> <img src="http://25.media.tumblr.com/tumblr_m41qspMUvL1rphuipo4_1280.jpg" alt=""/> </ div> <span class="delete"> </ span> </ div> <div class="pd_photo"> <div class="pd_hold"> <img src = "http://happy.ap.teacup.com/yukarisuketetu/timg/middle_1338987463.jpg" alt = " "/> </ div> <span class="delete"> </ span> </ div> <div class="pd_photo"> <div class="pd_hold"> <img src = "http://img01. taobaocdn.com/bao/uploaded/i1/T1zaS3Xb4rXXXI.Zo9_102633.jpg "alt =" "/> </ div> <span class="delete"> </ span> </ div> </ div> </ div>
Contoh Interaktif Galeri Foto Meja Dengan jQuery & CSS3.!
Facebook
.jpg)
0 komentar:
Posting Komentar