提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

图片翻转效果具体实现代码

代码 实现 图片 效果 具体 翻转
2023-06-13 09:15:15 时间
以下为程序代码：
复制代码代码如下:

<!DOCTYPEhtml/>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<title>图片翻转效果</title>
<styletype="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>
<divid="obj">
<divclass="box"id="b1"><divclass="txt">文字说明<br/>文字说明</br/>文字</div></div>
<divclass="box"id="b2"><divclass="txt">文字说明<br/>文字说明</br/>文字</div></div>
<divclass="box"id="b3"><divclass="txt">文字说明<br/>文字说明</br/>文字</div></div>
</div>
<scripttype="text/javascript">
functionShow(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";
returnclearInterval(Show.prototype["a"+v]);
}
}else{
if(o.offsetTop>=-10){
o.style.top=0;
returnclearInterval(Show.prototype["a"+v]);
}
}
o.style.top=(o.offsetTop*1+10*s)+"px";
},10);
}
varigs=document.getElementById("obj").getElementsByTagName("div");
for(vari=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>

效果预览：http://biyuan.tk/u/upload/201310221500310000.html

相关文章