Il sito per imparare gratuitamente a fare pagine Web

JavaScript E11
















E11 - Sfoglia Immagini Manuale con effetto sfoglia pagine di un libro.


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti:
Name: Gerard Ferrandez
Website: http://www.dhteumeuleu.com


Descrizione: Effetto grafico sfoglia libro, le immagini usate sono divise in due parti ed č possibile cliccare sulla parte destra o su quella sinistra dando vita all'effetto sfoglia libro avanti o indietro.




Le immagini usate per l'esempio sopra sono le stesse presenti su molti altri script qui su web-link ma in questo caso non credo siano le pių adeguate per l'esempio proposto. Provate a guardare invece quest'altro esempio sotto fatto con immagini fornite da Liar, che colgo l'occasione per ringraziare, le sue immagini rendono sicuramente meglio l'idea di uno sfoglia libro.


Passo 1 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo nella vostra pagina fra i tags <head> e </head>.

seleziona tutto



Passo 2 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo nella vostra pagina nel punto esatto in cui deve apparire l'effetto, fra i tags <body> e </body>.

seleziona tutto

Note : Per configurarlo si deve sostituire il nome e la descrizione delle nostre immagini con quelle presenti nel codice, e pių precisamente nel blocco div id imgsrc che si trova al passo 2.

Per le dimensioni delle foto ed il loro posizionamento sullo schermo si deve invece agire sui parametri del css al passo 1, e pių precisamente sul selettore ID #DHTMLBOOK dove:

width: 420px; ed height: 320px; sono le dimensioni in pixel delle immagini.

left: -210px; e top: -160px; sono le distanze in pixel dal bordo sinistro e da quello superiore della vostra pagina web.




Valutazione

Valutazione: 2.08 stelle su 5
N. Voti: (140)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.