您的位置：首页 > Web前端 > JavaScript

javascript + css 实现div层的伸缩(仅高度)-可设置初始慢慢展开

2011-02-16 11:40 639 查看

<!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=gb2312" />
<title>伸缩广告代码</title>
<style type="text/css">
body {
margin:0;
text-align:center;
}
#ad {
width:898px;
height:0px;/*这里设置高度为0是为了默认先执行展开操作，而不是直接全部显示出来*/
margin:0 auto;
overflow:hidden;
}

#btn{color:#08f}
#btn:hover{color:#F80}

</style>
</head>
<body>
<h5 id="btn" onclick="toogle()" style="cursor:pointer" >收缩</h5>
<div id="ad"><img style="width:898px;height:500px;" src="http://www.bizhi100.com/image/1440_900/2/asdmd1_08.jpg"

/></div>
<script type="text/javascript">
var funStatus = true;//无需手动设置，这是标记是否可以再次进行展开/收缩操作
var unfoldValue=10;//执行展开操作的像素数，越小越慢.并且不会因为数字过大超过设定的max高度而影响显示效果
var shrinkvalue=30;//执行收缩操作的像素数，越小越慢
var time=10;//多长时间操作一次，越小越快
var min=0;//收缩到多少像素的高度停止
var max = 500;//展开到多少像素高度停止

function HideAd(o){

var timer = setInterval(function(){
  if(o.offsetHeight >= min + shrinkvalue ){
   o.style.height = o.offsetHeight - shrinkvalue + 'px';
   document.getElementById('btn').innerHTML="展开";
   funStatus = false;
  }
  else{
   o.style.height = min+'px';
   funStatus = true;
   clearInterval(timer);
  }
}, time);
}
function ShowAd(o){

var timer = setInterval(function(){
  if(o.offsetHeight + unfoldValue < max){
   o.style.height = (o.offsetHeight + unfoldValue) + 'px';
   document.getElementById('btn').innerHTML="收缩";
   funStatus = false;
  }
  else{
   o.style.height = max+'px';
   funStatus = true;
   clearInterval(timer);
  }
},time);
}

function toogle()
{
if(funStatus)
{
  var o =document.getElementById('ad');
  if(o.offsetHeight >= max )
   HideAd(o);
  else
   ShowAd(o);
}

}

setTimeout(function(){toogle();funStatus = true;}, 1);
setTimeout(function(){toogle();funStatus = true;}, 5000);
</script>
</body>
</html>

欢迎大家有时间到我的小站去看看

www.joyoustore.com

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

标签： javascript div css function timer xhtml

相关文章推荐

新的分享

章节导航