The following is the program code:
Copy code code as follows:
<! Doctype html />
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<meta http-equiv = "x-ua-compatible" content = "ie = emulatie7" />
<TITLE> Picture Flip effect </Title>
<Style Type = "Text/CSS">
.Box {overflow: hidden; positive: relative;}
.txt {width: 100%; height: 100%; background:#f51146; font-siZe: 12px; posity: absolute; Top: -100%; Color: white;
text-align: center; filter: alpha (opacity = 80);
#b1 {background: url (http://biyuan.tk/u/upload/201310221457326875.jpg); width: 232px; height: 232px;}
#b2 {background: url (http://biyuan.tk/u/upload/201310221457486875.jpg); width: 110px; height: 110px;}
#b3 {background: url (http://biyuan.tk/u/upload/201310221458149843.jpg); width: 110px; height: 110px;}
</style>
</head>
<body>
<div ID = "Obj">
<div ID = "b1"> <div> text description <br/> text description </br/> text </div> </div>
<div ID = "b2"> <div> text description <br/> text description </br/> text </div> </div>
<div ID = "b3"> <div> text description <br/> text description </br/> text </div> </div>
</div>
<script type = "text/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]);
}
} Else {
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'). GetelementsBytagname ("DIV");
for (var I = 0; I <IGS.Length; I ++) {
if (IGS [i] .className == "Box") {{
(Function (x) {
igs [x] .onmouseover = function () {
Show (this.ChildNodes [0], 1, X);
this.onMouSeout = Function () {
Show (this.ChildNodes [0], -1, x);
}
}
}) (i);
}
}
</script>
</body>
</html>
Effect preview: http://biyuan.tk/u/upload/201310221500310000.html