javascript - 拡張 div の作成に助けが必要

Question

300x960 画像の上部 30x960 のみを初期化し、左上に「展開」ボタンを表示する展開 div が必要です。展開ボタンをクリックすると、div が「スライド」して 300x960 の完全な画像が表示されます。展開されているか縮小されているかに関係なく、他の場所をクリックすると、ユーザーは広告主の Web サイトに移動します。私が構築できる簡単なスニペットはありますか?

Answer 1

次のようなことを試してください：

<div style="width:960px; height:30px; position:relative; overflow:hidden">
<a href="http://another/site/"><img src="image.jpg" alt="" /></a>
<input type="button" value="Expand" style="position:absolute; left:10px; top:10px" onclick="expand(this)" />
</div>

<script type="text/javascript">
function expand(btn)
{
    btn.style.display='none';
    slide(btn.parentNode,30);
}

function slide(div,curHeight)
{
    if(curHeight==300)return;
    curHeight+=10;
    div.style.height=curHeight+'px';
    setTimeout(function(){slide(div,curHeight);},25);
}
</script>