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>