A seguir, o código do programa:
Copie o código do código da seguinte forma:
<! Doctype html />
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<meta http-equiv = "x-ua compatível com" content = "ie = emulatie7" />
<title> Efeito flip de imagem </title>
<Style type = "text/css">
.Box {Overflow: Hidden;
.txt {largura: 100%;
Alinhamento de texto: Center; filtro: alfa (opacidade = 80);
#B1 {Background: URL (http://biyuan.tk/u/upload/201310221457326875.jpg);
#B2 {Background: URL (http://biyuan.tk/u/upload/201310221457486875.jpg);
#B3 {Background: URL (http://biyuan.tk/u/upload/201310221458149843.jpg);
</style>
</head>
<Body>
<div id = "obj">
<div id = "b1"> <div> Texto Descrição <br/> Texto Descrição </r/> Texto </div> </div>
<div id = "b2"> <div> Texto Descrição <br/> Texto Descrição </r/> Texto </div> </div>
<div id = "b3"> <div> Texto Descrição <br/> Texto Descrição </r/> Texto </div> </div>
</div>
<script type = "text/javascript">
Função 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]);
}
} Outro {
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').
for (var i = 0; i <igs.length; i ++) {
if (igs [i] .className == "Box") {{
(Função (x) {
igs [x] .onMouseOver = function () {
Show (this.childnodes [0], 1, x);
this.onMouseOut = function () {
Show (this.childnodes [0], -1, x);
}
}
}) (eu);
}
}
</script>
</body>
</html>
Visualização de efeito: http://biyuan.tk/u/upload/201310221500310000.html