JQuery 实现带滑动层的图片展示效果

万戈 2010.02.24 发布于：电脑网络 4,482 次践踏

和我一样用 D&Z theme 的童鞋应该都看到过 zEUS 老大的网站，在其内页的侧边栏里有3列4行匡威的图片广告，当鼠标移动到每一张图片广告上时都会有一个半透明的层滑动上来显示广告的详细信息，很明显，这是一个 JQuery 实现的特效，相当的酷。只是可惜 zEUS 老大没有写出相关的教程，不过很巧的是，我在幸福收藏夹那里找到了答案：利用jQuery制作具有滑动动画效果的层。

先看一下我在本主题上的应用效果吧，请见侧边栏，我把原本单调的一张图片广告加上了滑动层，把鼠标移上去就可以显示文字信息。顺便空出了一个广告位，正在火热招租中，跳楼价40元/月，快来抢啊！！！

下面是简单的制作过程：

1、HTML 部分

<div class="boxgrid caption">

    <img src="images/ad.gif"/>

    <div class="cover boxcaption">

        <h3>标题</h3>

        <p>详细信息</p>

    </div>

</div>

2、CSS 部分

.boxgrid{

    width: 325px;

    height: 260px;

    margin:10px;

    float:left;

    background:#161613;

    border: solid 2px #8399AF;

    overflow: hidden;

    position: relative;

}

.boxgrid img{

    position: absolute;

    top: 0;

    left: 0;

    border: 0;

}

.boxgrid p{

    padding: 0 10px;

    color:#afafaf;

    font-weight:bold;

    font:10pt "Lucida Grande", Arial, sans-serif;

}

.boxcaption{

    float: left;

    position: absolute;

    background: #000;

    height: 100px;

    width: 100%;

    opacity: .8;

    /* For IE 5-7 */

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

    /* For IE 8 */

    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

}

.caption .boxcaption {

    top: 220;

    left: 0;

}

3、载入 JQuery

用 JQuery 1.2 就完全足够了，小巧，推荐。

4、JQuery 执行代码

$(document).ready(function(){

        $('.boxgrid.caption').hover(function(){

                $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});

        }, function() {

                $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});

        });

});

这里我只用了一种滑动效果，所以只需要以上这一段 JS 即可，更多滑动效果预览及参考代码请见：预览 | 下载这个实例的源文件

我只会拿来主义，把别人的东西加到自己的网站上，所以请别问我为什么，怎么做，想要知道其中原理并扩展发挥的朋友可以见此文：http://www.happinesz.cn/archives/1167/

最后，强调一下本文的重点：我在招广告啊！！！望乡亲父老、萝莉御姐们奔走相告，谢谢。

与

JQuery 实现带滑动层的图片展示效果

jQuery,侧边栏,图片,广告