Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Grafica Book Flip Slideshow
Postato da webmaster il Tuesday, 15 November @ 19:57:56 CET
Contributo di webmaster

Come suggerisce il nome, book flip è uno slideshow di immagini che simula la pagina di un libro che viene sfogliato, rivelando due nuove diapositive alla volta. Alcune altre caratteristiche di questa presentazione sono che lo slideshow può essere impostato in orizzontale o in verticale, ogni immagine può avere un collegamento opzionale ad essa associato, lo slideshow va in pausa al passaggio del mouse sulle immagini.

Procediamo inserendo il codice javascript nella sezione <head> della pagina:

<!-- INIZIO CODICE -->

<script type="text/javascript">
var Book_Image_Width=200;
var Book_Image_Height=150;
var Book_Border=true;
var Book_Border_Color="#000000";
var Book_Speed=15;
var Book_NextPage_Delay=1500;
var Book_Vertical_Turn=0;

Book_Image_Sources=new Array()
Book_Image_Sources[0]="001.jpg"
Book_Image_Sources[1]="# "
Book_Image_Sources[2]="002.jpg"
Book_Image_Sources[3]="#"
Book_Image_Sources[4]="003.jpg"
Book_Image_Sources[5]="#"
Book_Image_Sources[6]="004.jpg"
Book_Image_Sources[7]="#"
Book_Image_Sources[8]="005.jpg"
Book_Image_Sources[9]="#"
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);

B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}
function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;
setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function B_Stp(){B_Stppd=true;}
function B_Rstrt(){B_Stppd=false}
</script>

<!-- FINE CODICE -->

Adesso inseriamo il gestore di eventi onload nel tag body:

<body onload="ImageBook()">

Per ultimo, nel corpo della pagina, tra i tags <body>, inseriamo il codice html del <div> che richiama lo script,
nel punto esatto in cui vogliamo visualizzare lo slideshow.

<div id="Book" style="position:relative">
<img src="images/001.jpg" width="200" height="150"></div>

La personalizzazione è semplicissima, basta agire sulle 7 variabili all'inizio dello script.

Vediamole:

var Book_Image_Width=200;
definisce la larghezza delle immagini

var Book_Image_Height=150;
definisce l'altezza delle immagini

var Book_Border=true;
consente di specificare se si vuole visualizzare un bordo sulle immagini, i valori sono true per visualizzarlo e false per visualizzare le immagini senza bordo

var Book_Border_Color="gray";
definisce il colore del bordo se impostato a true

var Book_Speed=15;
definisce la velocità di transizione

var Book_NextPage_Delay=1500; 
indica il tempo tra una transizione e l'altra, 1 secondo=1000

var Book_Vertical_Turn=0;
definisce l'orientamento dello slideshow, i valori possibili sono:
0 e 1. Se impostato a 0 si avrà un orientamento orizzontale, mentre se impostato a 1 si avrà un orientamento verticale. 

Il percorso alle immagini e il relativo link vanno definiti nell'array:

Book_Image_Sources=new Array()
Book_Image_Sources[0]="001.jpg"
Book_Image_Sources[1]="#" // quì puoi inserire un link al posto del cancelletto
Book_Image_Sources[2]="002.jpg"
Book_Image_Sources[3]="#"
Book_Image_Sources[4]="003.jpg"
Book_Image_Sources[5]="#"
Book_Image_Sources[6]="004.jpg"
Book_Image_Sources[7]="#"
Book_Image_Sources[8]="005.jpg"
Book_Image_Sources[9]="#"


 
Links Correlati
· Indice Grafica
· Inoltre Grafica
· News by webmaster


Articolo più letto relativo a Grafica:
Immagine che si illumina al passaggio del mouse

Valutazione Articolo
Average Score: 4.5
Voti: 12


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

GraficaJavascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.06 Secondi

Theme by

© Oceanoweb