特效介绍
鼠标滑过显示图片信息
使用方法
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>