jquery实现盒子下拉效果示例代码

复制代码代码如下:
<script src="js/Jquery1.7.js"></script>
<script type="text/javascript">
$（function （） {
$（"div:eq（1）"）.css（{ "margin-top": "-=100px" }）;
$（"div:first"）.mouseover（function （） {
$（"div:eq（1）"）.animate（{"margin-top":"+=100px"}）;
}）
$（"div:first"）.mouseout（function （） {
$（"div:eq（1）"）.animate（{ "margin-top": "-=100px" }）;
}）
</script>

复制代码代码如下:
<pre name="code" class="html"><div style="width:600px;height:300px;overflow:hidden;">
<div style="background-color:#000;height:100px;">

</div>
<div style="background-color:#eee;height:300px;">

</div>
</div></pre><br>
<pre></pre>
<pre name="code" class="html"></pre><pre name="code" class="html">当把鼠标移动到盒子上的时候上面就会出现一个黑色的盒子</pre><pre name="code" class="html">这是在浏览网页的时候看到的一个效果</pre><pre name="code" class="html">在这里写了一下</pre>