KOMPOOS.NL
image flip
sitemap
voorbeeld image flip
uitleg procedure
Het javascript van de flip-image procedure staat onderop de pagina. Plaats het script zo laag mogelijk in de body sectie van de pagina. Om het script te starten moet je de body start-tag vervangen door het exemplaar wat hieronder te vinden is, en tot slot plaats je de div met het id "flip" (die ook hieronder staat) ergens op de pagina waar je het flip-effect wilt laten verschijnen. In het script staat de variabele verticaal. Wijzig de waarde in 1 (één) om de plaatjes verticaal te laten wisselen.
de body onload
<body onload="flip_image();">
de div voor de body-sectie
<div id="flip"></div>
javascript voor flip image procedure
<script>
/*global window: false */
/*global de_image_flip: false */
var breedte_plaatje = 150;
var hoogte_plaatje = 220;
var border = false;
var border_kleur = "#ffffff";
var snelheid = 40;
var pauze = 2000;
var verticaal = 0;
var de_plaatjes = [
"http://static.dns5.nl/book-flip-1.jpg", "http://kompoos.nl/javascripts/image-effects/image-flip.html",
"http://static.dns5.nl/book-flip-2.jpg", "http://kompoos.nl/javascripts/image-effects/image-flip.html",
"http://static.dns5.nl/book-flip-3.jpg", "http://kompoos.nl/javascripts/image-effects/image-flip.html",
"http://static.dns5.nl/book-flip-4.jpg", "http://kompoos.nl/javascripts/image-effects/image-flip.html",
"http://static.dns5.nl/book-flip-5.jpg", "http://kompoos.nl/javascripts/image-effects/image-flip.html",
"http://static.dns5.nl/book-flip-6.jpg", "http://kompoos.nl/javascripts/image-effects/image-flip.html"
];
var de_css_code = "#flip{position:relative;height:" + hoogte_plaatje + "px}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var de_offset,
i,
de_flip_div,
hoe_lang = 6,
check_hoogte = 1,
flip_image_1,
flip_image_3,
flip_image_2,
wissel,
de_hoek = 0,
hoogte_check,
gestopt = false,
image_flip_array = [];
function delink() {
if (this.lnk) {
window.location.href = this.lnk;
}
}
function stoppen() {
gestopt = true;
this.style.cursor = this.lnk ? "pointer": "default";
}
function starter() {
gestopt = false;
}
function even_stoppen() {
if (hoe_lang == de_plaatjes.length) {
hoe_lang = 0;
}
flip_image_2.src = image_flip_array[hoe_lang].src;
flip_image_2.lnk = de_plaatjes[hoe_lang + 1];
flip_image_3.style.zIndex = 2;
flip_image_1.style.zIndex = 1;
de_hoek = 0;
hoe_lang = hoe_lang + 2;
setTimeout(function() {
de_image_flip();
},
50);
}
function de_image_flip() {
if (!gestopt) {
if (verticaal) {
hoogte_check = Math.abs(Math.round(Math.cos(de_hoek) * hoogte_plaatje));
de_offset = !check_hoogte ? hoogte_plaatje + 1: hoogte_plaatje - hoogte_check;
flip_image_3.style.top = de_offset + "px";
flip_image_3.style.height = hoogte_check + "px";
} else {
hoogte_check = Math.abs(Math.round(Math.cos(de_hoek) * breedte_plaatje));
de_offset = check_hoogte ? breedte_plaatje + 1: breedte_plaatje - hoogte_check;
flip_image_3.style.left = de_offset + "px";
flip_image_3.style.width = hoogte_check + "px";
}
de_hoek += snelheid / 720 * Math.PI;
if (de_hoek >= Math.PI / 2 && check_hoogte == 1) {
check_hoogte = 0;
if (hoe_lang == de_plaatjes.length) {
hoe_lang = 0;
}
flip_image_3.src = image_flip_array[hoe_lang].src;
flip_image_3.lnk = de_plaatjes[hoe_lang + 1];
}
if (de_hoek >= Math.PI) {
check_hoogte = 1;
wissel = flip_image_1;
flip_image_1 = flip_image_3;
flip_image_3 = wissel;
if (verticaal) {
flip_image_3.style.top = 0 + "px";
} else {
flip_image_3.style.left = breedte_plaatje + 1 + "px";
}
flip_image_3.src = flip_image_2.src;
flip_image_3.lnk = flip_image_2.lnk;
setTimeout(function() {
even_stoppen();
},
pauze);
hoe_lang = hoe_lang + 2;
} else {
setTimeout(function() {
de_image_flip();
},
50);
}
} else {
setTimeout(function() {
de_image_flip();
},
10);
}
}
function flip_image() {
if (document.getElementById) {
for (i = 0; i < de_plaatjes.length; i = i + 2) {
image_flip_array[i] = new Image();
image_flip_array[i].src = de_plaatjes[i];
}
de_flip_div = document.getElementById("flip");
flip_image_1 = document.createElement("img");
de_flip_div.appendChild(flip_image_1);
flip_image_2 = document.createElement("img");
de_flip_div.appendChild(flip_image_2);
flip_image_3 = document.createElement("img");
de_flip_div.appendChild(flip_image_3);
flip_image_1.style.position = flip_image_3.style.position = flip_image_2.style.position = "absolute";
flip_image_1.style.zIndex = flip_image_2.style.zIndex = 0;
flip_image_3.style.zIndex = 1;
flip_image_1.style.top = (verticaal ? hoogte_plaatje + 1: 0) + "px";
flip_image_1.style.left = 0 + "px";
flip_image_3.style.top = 0 + "px";
flip_image_3.style.left = (verticaal ? 0: breedte_plaatje + 1) + "px";
flip_image_2.style.top = 0 + "px";
flip_image_2.style.left = (verticaal ? 0: breedte_plaatje + 1) + "px";
flip_image_1.style.height = hoogte_plaatje + "px";
flip_image_3.style.height = hoogte_plaatje + "px";
flip_image_2.style.height = hoogte_plaatje + "px";
flip_image_1.style.width = breedte_plaatje + "px";
flip_image_3.style.width = breedte_plaatje + "px";
flip_image_2.style.width = breedte_plaatje + "px";
if (border) {
flip_image_1.style.borderStyle = flip_image_3.style.borderStyle = flip_image_2.style.borderStyle = "solid";
flip_image_1.style.borderWidth = 1 + "px";
flip_image_3.style.borderWidth = 1 + "px";
flip_image_2.style.borderWidth = 1 + "px";
flip_image_1.style.borderColor = flip_image_3.style.borderColor = flip_image_2.style.borderColor = border_kleur;
}
flip_image_1.src = image_flip_array[0].src;
flip_image_1.lnk = de_plaatjes[1];
flip_image_3.src = image_flip_array[2].src;
flip_image_3.lnk = de_plaatjes[3];
flip_image_2.src = image_flip_array[4].src;
flip_image_2.lnk = de_plaatjes[5];
flip_image_1.onclick = flip_image_3.onclick = flip_image_2.onclick = delink;
flip_image_1.onmouseover = flip_image_3.onmouseover = flip_image_2.onmouseover = stoppen;
flip_image_1.onmouseout = flip_image_3.onmouseout = flip_image_2.onmouseout = starter;
de_image_flip();
}
}
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.