Er is geen CSS ondersteuning.
Een makkelijke book-flip. Het stukje javascript spreekt voor zichzelf. In de array -deplaatjes- plaats je de plaatjes en de links. De hoogte en breedte en overige variabelen kunnen ook geen problemen geven. Oh, als je een kalender effect wilt kan je de var -verticaal- op "1" zetten. Het book flip script is foutloos volgens JSLint. Ik zet het even hieronder:
<script>
/*global window: false */
/*global doen: false */
var deplaatjes = [
"http://static.dns5.nl/book-flip-1.jpg", "http://www.dns5.nl/javascript/book-flip.html",
"http://static.dns5.nl/book-flip-2.jpg", "http://www.dns5.nl/javascript/book-flip.html",
"http://static.dns5.nl/book-flip-3.jpg", "http://www.dns5.nl/javascript/book-flip.html",
"http://static.dns5.nl/book-flip-4.jpg", "http://www.dns5.nl/javascript/book-flip.html",
"http://static.dns5.nl/book-flip-5.jpg", "http://www.dns5.nl/javascript/book-flip.html",
"http://static.dns5.nl/book-flip-6.jpg", "http://www.dns5.nl/javascript/book-flip.html"
];
var breedte = 150;
var hoogte = 220;
var border = false;
var borderkleur = "#004400";
var snelheid = 40;
var pauze = 2000;
var verticaal = 0;
var mofs,
i,
deflipdiv,
hoelang = 6,
var4 = 1,
creal1,
creal3,
creal2,
wissel,
dehoek = 0,
var5,
hoho = false,
picarr = [];
function delink() {
if (this.lnk) {
window.location.href = this.lnk;
}
}
function ztop() {
hoho = true;
this.style.cursor = this.lnk ? "pointer": "default";
}
function ztart() {
hoho = false;
}
function evenho() {
if (hoelang == deplaatjes.length) {
hoelang = 0;
}
creal2.src = picarr[hoelang].src;
creal2.lnk = deplaatjes[hoelang + 1];
creal3.style.zIndex = 2;
creal1.style.zIndex = 1;
dehoek = 0;
hoelang = hoelang + 2;
setTimeout(function() {
doen();
},
50);
}
function doen() {
if (!hoho) {
if (verticaal) {
var5 = Math.abs(Math.round(Math.cos(dehoek) * hoogte));
mofs = !var4 ? hoogte + 1: hoogte - var5;
creal3.style.top = mofs + "px";
creal3.style.height = var5 + "px";
} else {
var5 = Math.abs(Math.round(Math.cos(dehoek) * breedte));
mofs = var4 ? breedte + 1: breedte - var5;
creal3.style.left = mofs + "px";
creal3.style.width = var5 + "px";
}
dehoek += snelheid / 720 * Math.PI;
if (dehoek >= Math.PI / 2 && var4 == 1) {
var4 = 0;
if (hoelang == deplaatjes.length) {
hoelang = 0;
}
creal3.src = picarr[hoelang].src;
creal3.lnk = deplaatjes[hoelang + 1];
}
if (dehoek >= Math.PI) {
var4 = 1;
wissel = creal1;
creal1 = creal3;
creal3 = wissel;
if (verticaal) {
creal3.style.top = 0 + "px";
} else {
creal3.style.left = breedte + 1 + "px";
}
creal3.src = creal2.src;
creal3.lnk = creal2.lnk;
setTimeout(function() {
evenho();
},
pauze);
hoelang = hoelang + 2;
} else {
setTimeout(function() {
doen();
},
50);
}
} else {
setTimeout(function() {
doen();
},
10);
}
}
function flipper() {
if (document.getElementById) {
for (i = 0; i < deplaatjes.length; i = i + 2) {
picarr[i] = new Image();
picarr[i].src = deplaatjes[i];
}
deflipdiv = document.getElementById("flip");
creal1 = document.createElement("img");
deflipdiv.appendChild(creal1);
creal2 = document.createElement("img");
deflipdiv.appendChild(creal2);
creal3 = document.createElement("img");
deflipdiv.appendChild(creal3);
creal1.style.position = creal3.style.position = creal2.style.position = "absolute";
creal1.style.zIndex = creal2.style.zIndex = 0;
creal3.style.zIndex = 1;
creal1.style.top = (verticaal ? hoogte + 1: 0) + "px";
creal1.style.left = 0 + "px";
creal3.style.top = 0 + "px";
creal3.style.left = (verticaal ? 0: breedte + 1) + "px";
creal2.style.top = 0 + "px";
creal2.style.left = (verticaal ? 0: breedte + 1) + "px";
creal1.style.height = hoogte + "px";
creal3.style.height = hoogte + "px";
creal2.style.height = hoogte + "px";
creal1.style.width = breedte + "px";
creal3.style.width = breedte + "px";
creal2.style.width = breedte + "px";
if (border) {
creal1.style.borderStyle = creal3.style.borderStyle = creal2.style.borderStyle = "solid";
creal1.style.borderWidth = 1 + "px";
creal3.style.borderWidth = 1 + "px";
creal2.style.borderWidth = 1 + "px";
creal1.style.borderColor = creal3.style.borderColor = creal2.style.borderColor = borderkleur;
}
creal1.src = picarr[0].src;
creal1.lnk = deplaatjes[1];
creal3.src = picarr[2].src;
creal3.lnk = deplaatjes[3];
creal2.src = picarr[4].src;
creal2.lnk = deplaatjes[5];
creal1.onclick = creal3.onclick = creal2.onclick = delink;
creal1.onmouseover = creal3.onmouseover = creal2.onmouseover = ztop;
creal1.onmouseout = creal3.onmouseout = creal2.onmouseout = ztart;
doen();
}
}
flipper();
</script>
Vanzelfsprekend valideert de html(5) en de css ook. Niets meer te melden over dit book-flip script.
cache 13-11-2010