Image flip effect specific implementation code

2020-03-30 01:17:01
OfStack
The following is the program code:
 
<!DOCTYPE html /> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<title> Image flip effect </title> 
<style type="text/css"> 
.box {overflow:hidden;position:relative;} 
.txt {width:100%;height:100%;background:#f51146;font-size:12px;position:absolute;top:-100%;color:white; 
text-align:center;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:0.8;} 
#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 class="box" id="b1"><div class="txt"> captions <br /> captions </br /> The text </div></div> 
<div class="box" id="b2"><div class="txt"> captions <br /> captions </br /> The text </div></div> 
<div class="box" id="b3"><div class="txt"> captions <br /> captions </br /> The 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>
Preview: http://biyuan.tk/u/upload/201310221500310000.html