Berikut ini adalah kode program:
Salin kode kode sebagai berikut:
<!
<Html>
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" /> />
<meta http-equiv = "x-ua-kompatibel" konten = "IE = emulatie7" />
<Title> Efek Flip Picture </iteme>
<Type style = "text/css">
.Box {overflow: tersembunyi;
.txt {Width: 100%;
Text-Align: Center;
#b1 {latar belakang: url (http://biyuan.tk/u/upload/201310221457326875.jpg);
#b2 {latar belakang: url (http://biyuan.tk/u/upload/201310221457486875.jpg);
#B3 {latar belakang: url (http://biyuan.tk/u/upload/201310221458149843.jpg);
</tyle>
</head>
<body>
<Div id = "obj">
<Div ID = "B1"> <div> Deskripsi Teks <br/> Deskripsi Teks </br/> Teks </Div> </Div>
<Div ID = "B2"> <div> Deskripsi Teks <br/> Deskripsi Teks </br/> Teks </div> </div>
<Div ID = "B3"> <div> Deskripsi Teks <br/> Deskripsi Teks </br/> Teks </Div> </Div>
</div>
<type skrip = "Teks/JavaScript">
Function show (o, s, v) {{
ClearInterval (show.prototype ["a" + v]);
Show.prototype ["a" + v] = setInterval (function () {
if (s == -1) {
if (o.offsettop <= -o.parentnode.offsetHeight) {{
o.style.top = -o.parentnode.offsetHeight + "px";
Return clearInterval (show.prototype ["a" + v]);
}
} Kalau tidak {
if (o.offsettop> = -10) {
o.style.top = 0;
Return clearInterval (show.prototype ["a" + v]);
}
}
o.style.top = (o.offsettop * 1 + 10 * s) + "px";
}, 10);
}
var igs = document.geteLementById ('obj').
untuk (var i = 0; i <igs.length; i ++) {
if (igs [i] .className == "box") {{
(Function (x) {
IGS [x] .onmouseover = function () {
Tunjukkan (this.childnodes [0], 1, x);
this.onmouseout = function () {
Tunjukkan (this.childnodes [0], -1, x);
}
}
}) (Saya);
}
}
</script>
</body>
</html>
Pratinjau Efek: http://biyuan.tk/u/upload/201310221500310000.html