                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /展開(kāi)與收起效果

瞎寫(xiě)的，沒(méi)看完教程，應(yīng)該是另外一種思路

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8"?/>
<meta?http-equiv="X-UA-Compatible"?content="IE=edge"?/>
<meta?name="viewport"?content="width=device-width,?initial-scale=1"?/>
<title>折疊效果2</title>
<style>
*?{?margin:?0;?padding:?0;?box-sizing:?border-box;?}
#wrap?{
width:?800px;
margin:?0?auto;
}
#ad?{
width:?100%;
height:?0px;
overflow:?hidden;
transition:?height?5s;
}
#ad?img?{
width:?100%;
}
#banner?{
width:?100%;
height:?100px;
background-color:?#69c;
line-height:?100px;
text-align:?center;
}
#banner?a?{
text-decoration:?none;
}

</style>
</head>
<body>
<div?id="wrap">
<div?id="ad"></div>
<div?id="banner">
<a?href="#">點(diǎn)擊展開(kāi)</a>
</div>
</div>

<script>
window.onload?=?function()?{
let?adBox??=?document.querySelector('#ad');
let?banner?=?document.querySelector('#banner');

let?img?=?new?Image();
img.src?=?"src/lili.jpg";
imgEl?=?`<img?src="${img.src}"/>`;

img.onload?=?function()?{
adBox.innerHTML?=?imgEl;
}

banner.addEventListener('mouseover',?function(){
adBox.style.height?=?'480px';
});
banner.onmouseout?=?function(){
adBox.style.height?=?'0px';
};

}
</script>
</body>
</html>