Autor | Zpráva | ||
---|---|---|---|
senior Profil |
#1 · Zasláno: 21. 1. 2008, 22:57:44
Príjemný deň,
prosím o radu čím, resp. ako urobiť plynulý prechod z jedného obrázku do druhého, tretieho ... (nie morphing a flash)? Prešiel som celú diskusiu, ale problém je v tom, že to neviem asi správne špecifikovať. Ďakujem. |
||
e Profil * |
#2 · Zasláno: 21. 1. 2008, 23:18:58
Ak správne chápem, tak najlepšie JavaScriptom. Skús použiť napr. MooTools, takéto efekty má aj vbudované.
|
||
senior Profil |
#3 · Zasláno: 22. 1. 2008, 13:22:16
e
Ďakujem, je to ono, ale je potrebné ten prechod obrázkov odštartovať a následne sa sám zastaví. Ja by tom potreboval, aby sa to spustilo samé a prechod obrázkov aby išiel stále dookola. Skúšam upraviť JS kód, ale nedarí sa mi to. Tu je JS kód: var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar'); var path = 'http://demos.mootools.net/demos/Asset.images/'; var images = [ path + 'cow1.png', path + 'cow2.jpg', path + 'cow3.jpg', path + 'cow4.jpg', path + 'cow5.jpg' ]; gallery.setStyles({'opacity': 0, 'display': 'none'}); progress.setStyle('visibility', 'hidden'); $('clear').setStyle('visibility', 'hidden'); $('start').addEvent('click', function(e) { e = new Event(e).stop(); $('start').setStyle('visibility', 'hidden'); $('clear').setStyle('visibility', 'hidden'); if (!busy) { var galleryImgs = $$('#gallery img'); if (galleryImgs.length > 0) galleryImgs.each(function(image) { image.remove(); }); busy = true; progress.setStyle('visibility', 'visible'); gallery.setStyle('display', 'block'); new Asset.images(images, { onProgress: function(i) { this.setStyles({ 'position': 'absolute', 'opacity': 0, 'left': (gallery.getCoordinates().width / 2) - (this.width / 2), 'top': (gallery.getCoordinates().height / 2) - (this.height / 2) }); loadedImages[i] = this; var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length; bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length); }, onComplete: function() { progress.setStyle('visibility', 'hidden'); var fx = $('gallery').effect('opacity').start(1); timer = 0; loadedImages.each(function(image, i) { timer += 1500; image.inject(gallery); fx = function() { var imgEffect = image.effect('opacity', {duration: 1500}); imgEffect.start(1).chain(function() { if (i < loadedImages.length - 1) { this.start(0).chain(function() { image.remove(); }); } else { busy = false; $('clear').setStyle('visibility', 'visible'); $('start').setStyle('visibility', 'hidden'); } }); }.delay(timer * 2); }); } }); } }); $('clear').addEvent('click', function(e) { e = new Event(e).stop(); if (!busy) { $$('#gallery img').each(function(image) { image.remove(); }); var fx = new Fx.Style(gallery, 'opacity', { onComplete: function() { gallery.setStyle('display', 'none'); } }); fx.start(0); } $('clear').setStyle('visibility', 'hidden'); $('start').setStyle('visibility', 'visible'); }); |
||
Časová prodleva: 16 let
|
0