首页 > 特效插件 > 表格弹出层 >  鼠标滑过显示图片标题和描述的jQuery jCapSlide插件正文

鼠标滑过显示图片标题和描述的jQuery jCapSlide插件

特效介绍
鼠标滑过显示图片信息
鼠标滑过显示图片信息
基于jQuery的鼠标滑过图片,显示图片标题和描述的jQuery jCapSlide插件,当鼠标浮到图片上,或者滑过图片,就会从图片底部滑出一个层,显示图片的标题描述等等。可自定义标题颜色,标题背景色、浮动层背景色,边框和浮动前是否显示标题等等。
使用方法
1、在head引入style.css。

2、在需要使用该效果的地方加入类似下面的代码:
<div id="capslide_img_cont" class="ic_container">
    <img src="images/example2.jpg" width="180" height="240" alt=""/>
    <div class="overlay" style="display:none;"></div>
    <div class="ic_caption">
        <p class="ic_category">网页特效</p>
            <h3>免费网页模板</h3>
        <p class="ic_text"> 这里是图片描述,当鼠标划过时,就会显示图片的描述。我爱模板网,专业提供各种免费的网站模板,网页特效,网站源码等等 </p>
    </div>
</div>
3、在html后面加入下面的代码:
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script src="jquery.capSlide.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $("#capslide_img_cont").capslide({
            caption_color    : 'white',   //标题颜色
            caption_bgcolor    : 'black',   //标题背景色
            overlay_bgcolor : 'black',   //浮动层背景色
            border            : '',   //边框样式,没有就留空,格式如下:4px solid #ccc
            showcaption        : false   //是否显示标题
        });
    });
</script>