다음은 프로그램 코드입니다.
다음과 같이 코드 코드를 복사하십시오.
<doctype html />
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" /> />
<meta http-equiv = "x-ua-cattible"content = "ie = emulatie7" />
<title> 그림 플립 효과 </title>
<스타일 유형 = "텍스트/CSS">
.box {오버플로 : 긍정적 인;}
.TXT : 100%;
텍스트-정렬 : 센터;
#B1 {url (http://biyuan.tk/u/upload/201310221457326875.jpg);
#b2 {url (http://biyuan.tk/u/upload/201310221457486875.jpg);
#b3 {url (http://biyuan.tk/u/upload/201310221458149843.jpg;
</스타일>
</head>
<body>
<div id = "obj">
<div id = "b1"> <div> 텍스트 설명 <br/> 텍스트 설명 </br/> 텍스트 </div> </div>
<div id = "b2"> <div> 텍스트 설명 <br/> 텍스트 설명 </br/> 텍스트 </div> </div>
<div id = "b3"> <div> 텍스트 설명 <br/> 텍스트 설명 </br/> 텍스트 </div> </div>
</div>
<script type = "text/javaScript">
함수 쇼 (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";
ClearInterval을 반환합니다 (show.prototype [ "a" + v]);
}
} 또 다른 {
if (O.OffSetTop> = -10) {
o.style.top = 0;
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") {{
(함수 (x) {
igs [x] .onmouseover = function () {
show (this.childnodes [0], 1, x);
this.onmouseout = function () {
show (this.childnodes [0], -1, x);
}
}
}) (나);
}
}
</스크립트>
</body>
</html>
효과 미리보기 : http://biyuan.tk/u/upload/201310221500310000.html