<style type="text/css"> #dv1{ width:1000px; height:1000px; overflow:hidden; display:none; } </style> <script type="text/javascript"> window.onload = function () { document.getElementById('btn2').onclick = function () { //1启动计时器 var inter= setInterval(function () { //2获取要操作的层 var dvobj = document.getElementById('dv1'); //3高度递减 var h = dvobj.offsetHeight; h -= 3; if (h <= 0) { h = 0; //4把新的高度设置给层 dvobj.style.height = h + 'px'; dvobj.style.display = 'none'; clearInterval(inter); } else { dvobj.style.height = h + 'px'; } },100) } document.getElementById('btn1').onclick = function () { var dvobj = document.getElementById('dv1'); if(dvobj.style.display.length==0){ dvobj.style.display = 'none'; this.value = '显示'; } else { dvobj.style.display = ''; this.value = '隐藏'; } } } </script> </head> <body> <input type="button" name="name" value="隐藏" /> <input type="button" name="name" value="通过动画隐藏" /> <input type="button" name="name" value="通过动画显示" /> <div > <img src="Images/QQ图片20170619233404.jpg" /> </div>