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

更新时间：2013年09月12日 17:27:28 作者：

当把鼠标移动到盒子上的时候上面就会出现一个黑色的盒子,这是在浏览网页的时候看到的一个效果，具体实现如下，感兴趣的朋友可以了解下

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

javascript中对Attr(dom中属性)的操作示例讲解
这篇文章主要是对javascript中对Attr(dom中属性)的操作进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
基于jQuery的简单的列表导航菜单
最近一段时间准备开始学习JQUERY,感觉JQUERY的功能非常强大,而且代码量也减少了许多....代码也非常的清晰!
2011-03-03
自动适应iframe右边的高度
在开发项目过程中，用iframe嵌套，会发现一个问题，用iframe嵌套的html结构右边不会自动适应高度。如何解决这一问题呢，下面就跟小编一起来看下吧
2016-12-12
jQuery制作简洁的多级联动Select下拉框
省市多级联动的select下拉框有很多种实现方式，度娘上随便一搜就一大堆，今天我们来讨论的这款特效，代码却很简洁，兼容性也非常棒，推荐给大家。
2014-12-12
jQuery横向擦除焦点图特效代码分享
这篇文章主要介绍了jQuery横向擦除焦点图特效，一个具有自己特色的焦点图会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的焦点图，感兴趣的小伙伴可以参考下。
2015-09-09
jquery isType() 类型判断代码
jquery isType() 类型判断代码，需要的朋友可以参考下。
2011-02-02
Jquery倒数计时按钮setTimeout的实例代码
这篇文章介绍了Jquery倒数计时按钮setTimeout的实例，有需要的朋友可以参考一下
2013-07-07
JQuery中SetTimeOut传参问题探讨
无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，解决办法是在此函数的基础上在做一层封装
2013-05-05
jQuery包裹节点用法完整示例
这篇文章主要介绍了jQuery包裹节点用法,结合完整实例形式分析了jQuery中wrap方法包裹节点的使用技巧,注释中还包含了wrapAll与wrapInner方法的使用,需要的朋友可以参考下
2016-09-09
xheditor与validate插件冲突的解决方案
xheditor和validate都是优秀的jQuery插件，但将两者组合到起，如果初始化的顺序不当，则会出现一些微妙的结果。
2010-04-04