您的位置：首页 > 其它

一个简单的手风琴效果

2012-06-04 12:52 274 查看

本人承认有点小bug 高手门多多指点哈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>img window</title>
<style type="text/css">
body{text-align:center;}
*{margin:0;padding:0;border:none;}
#imgmenu{width:600px;height:350px;border:10px solid #D2691E;margin:auto;overflow:hidden;margin-top:40px;}
#imgmenu #content{width:800px;float:left;}
#imgmenu #content div{float:left;overflow:hidden;}
#imgmenu #content div img{border-left:5px solid #DEB887;}

</style>
</head>
<body>

<div id="imgmenu">
<div id="content">
<div><img src="images/1.jpg"/></div>
<div><img src="images/2.jpg"/></div>
<div><img src="images/3.jpg"/></div>
<div><img src="images/4.jpg"/></div>
<div><img src="images/5.jpg"/></div>
<div><img src="images/6.jpg"/></div>
</div>
</div>
<script type="text/javascript">

window.onload=function(){
var timer=null;
function getId(Idname){return document.getElementById(Idname)};
var content=getId("content")
var imgmenu=getId("imgmenu");
var pics=getId("content").getElementsByTagName("div");
function slide(obj){
var speed=obj.offsetWidth;
clearInterval(timer);
timer=setInterval(function(){
for(var i=0;i<pics.length;i++){
var speed2=pics[i].offsetWidth;
if(pics[i].offsetWidth!=40){
speed2-=Math.ceil((speed2-40)/4);
pics[i].style.width=speed2+"px";};
}
if(obj.offsetWidth!=400){
speed+=Math.ceil((400-speed)/4);
obj.style.width=speed+"px";};
},30);
}
for(var i=0;i<pics.length;i++){
pics[i].style.width=40+"px";
pics[0].style.width=400+"px";
pics[i].onmouseover=function(){
this.slide=slide(this);
}
}
}

</script>
</body>
</html>

昨天 15:36 上传

下载次数: 0

手风琴.zip

1

昨天 15:36 上传

下载次数: 0

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航