首页 > 代码库 > JS 之手风琴效果
JS 之手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
/>
<title></title>
<meta content=
" "
/>
<meta content=
" "
/>
<style>
#c{width:500px;height:300px;overflow:hidden;background:#ccc;}
p { float:left;width:20px;height:300px;}
</style>
</head>
<body>
<div id=
"c"
>
<p style=
"background:#9cf;width:420px;"
>1</p>
<p style=
"background:#f9c;"
>2</p>
<p style=
"background:#c9f;"
>3</p>
<p style=
"background:#cf9;"
>4</p>
<p style=
"background:#9fc;"
>5</p>
</div>
<script >
function
accordion(Id,Tag,Long,Short){
var
Div=document.getElementById(Id);
var
Divs=Div.getElementsByTagName(Tag);
var
i=0;
var
t=
null
;
for
(i=0;i<Divs.length;i++){
Divs[i].index=i;
Divs[i].onmouseover=
function
(){
var
index=
this
.index;
if
(t){clearInterval(t);}
t=setInterval(
function
(){
var
iWidth=Long;
for
(i=0;i<Divs.length;i++){
if
(index!=Divs[i].index){
var
iSpeed=(Short-Divs[i].offsetWidth)/5;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
Divs[i].style.width=Divs[i].offsetWidth+iSpeed+
‘px‘
;
iWidth-=Divs[i].offsetWidth;
};
};
Divs[index].style.width=iWidth+
‘px‘
;
}, 30);
};
}
}
</script>
</body>
</html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。