JavaScript动画方式控制div元素的隐藏和显示

快乐打工仔 分类:实例代码

JavaScript动画方式控制div元素的隐藏和显示属于前端实例代码,有关更多实例代码大家可以查看

jQuery实现此功能相对比较简单,具体参阅点击按钮动画方式隐藏和显示div一章节。

结合CSS3实现此功能也非常便利和适合,具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节。

原生JavaScript实现稍显麻烦,下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#antzone{
  width:200px;
  background-color:green;
}
</style>
<script>
window.onload=function(){
  var speed=5;
  var odiv=document.getElementById("antzone");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    if(odiv.style.display=="block"){
      var timer=setInterval(function(){
        if(parseInt(odiv.style.height)>0){
          var H=parseInt(odiv.style.height);
          H=H-speed;
          odiv.style.height=H+"px";
        }        else{
          odiv.style.display="none";
          obt.value="点击显示";
          clearInterval(timer);
        }
      },50)
    }else{
      var timer=setInterval(function(){
        if(parseInt(odiv.style.height)<100){
          odiv.style.display="block";
          var H=parseInt(odiv.style.height);
          H=H+speed;
          odiv.style.height=H+"px";
        }else{
          obt.value="点击隐藏";
          clearInterval(timer);
        }
      },50)
    }
  }
}
</script>
</head>
<body>
<div id="antzone" style="display:block;height:100px;"></div>
<input type="button" id="bt" value="点击隐藏"/>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(2).var speed=5,设置高度调整的幅度。

(3).var odiv=document.getElementById("antzone"),获取id属性值为antzone的元素对象。

(4).var obt=document.getElementById("bt"),获取按钮元素对象。

(5).obt.onclick=function(){},为按钮注册onclick事件处理函数。

(6).if(odiv.style.display=="block"){},判断元素是否处于显示状态。

(7).var timer=setInterval(function(){

  if(parseInt(odiv.style.height)>0){

    var H=parseInt(odiv.style.height);

    H=H-speed;

    odiv.style.height=H+"px";

  }else{

    odiv.style.display="none";

    obt.value="点击显示";

    clearInterval(timer);

  }

},50),使用定时器函数不断的设置元素的高度。

odiv.style.height获取的是一个字符串,并且带有单位,所以必须使用parseInt()转换一下。

二.相关阅读:

(1).setInterval()方法参阅setInterval()一章节。

(2).parseInt()方法参阅JavaScript parseInt()一章节。

(3).clearInterval()方法参阅window.clearInterval()一章节。

JavaScript动画方式控制div元素的隐藏和显示,这样的场景在实际项目中还是用的比较多的,关于JavaScript动画方式控制div元素的隐藏和显示就介绍到这了。

回复

我来回复
  • 暂无回复内容