码迷,mamicode.com
首页 > 其他好文 > 详细

卷帘效果

时间:2015-07-09 17:44:16      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

<head>
<title>卷帘效果</title>
</head>
<body>
<input id="shen" type="button" value="展开">
<input id="shou" type="button" value="收起">
<div id="wind" style="background-color:#bbbbbb;width:200px;height:1px;">
</div>
<script type="text/javascript">
//控制展开的旗标
var shenflag=true;
var shouflag = false;
function shen(){
if(shenflag){
shouflag=false;
var tm;
var windHeight=document.getElementById("wind").style.height;
if(parseInt(windHeight.substring(0,windHeight.indexOf("px")))<100){
document.getElementById("wind").style.height=
parseInt(windHeight.substring(0,windHeight.indexOf("px")))+2+"px";
tm = setTimeout("shen()",50);
}else{
clearTimeout(tm);
shouflag = true;
}
}
}
function shou(){
if(shouflag){
shenflag=false;
var tm;
var windHeight=document.getElementById("wind").style.height;
if(parseInt(windHeight.substring(0,windHeight.indexOf("px")))>3){
document.getElementById("wind").style.height=
parseInt(windHeight.substring(0,windHeight.indexOf("px")))-2+"px";
tm = setTimeout("shou()",50);
}else{
clearTimeout(tm);
shouflag = true;
}

}
}
document.getElementById("shen").onclick=shen;
document.getElementById("shou").onclick=shou;
</script>
</body>

卷帘效果

标签:

原文地址:http://www.cnblogs.com/my-king/p/4633617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!