需要一些帮助建立一个扩展的div

时间:2010-09-27 16:05:40

标签: javascript expand sliding clickable

我需要一个扩展div,它初始化时只显示300x960图像的顶部30x960以及左上角的“展开”按钮。单击展开按钮将向下“滑动”div以显示300x960的完整图像。点击其他任何地方,无论是展开还是缩小,都会将用户带到广告客户网站。我可以构建哪些快速片段?

1 个答案:

答案 0 :(得分:0)

尝试这样的事情:

<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>