Jquery如何实现鼠标滑过显示层叠样式

<script src='js/jquery.min.js' type='text/javascript'></script>

<script src='js/jquery.captall.min.js' type='text/javascript'></script>

<script type="text/javascript" src="js/easing.js"></script>

具体引用方式举例（主要图片部分要格式一致）：

<a href="#">
<div class="squanimg">
<img src="images/230px.jpg" class="image" alt="这是一个效果显示商圈" />
</div>
</a>

我们可以看到这样的效果：

在引用页面还要添加上对应的引用代码：

<script type="text/javascript">
$(document).ready(function () {
//这个地方设置鼠标滑过字母的参数
$('.image').captall({
animation: 'fade',
slideFrom: 'topcenter',
backgroundColor: '#1abc9c',
paddingLeft:10,
paddingRight:10,
paddingTop:100,
fontColor: '#ffffff',
slideTo: 'bottom',
width: '100%',
height: '100%'});
});
</script>

上述参数参考选项：

animation   String       默认值：幻灯片 -如何将字幕显示自己？

backgroundColor   String 默认值：FFFFFF -定义背景颜色。

caption   String         默认值：空 -文本或链接或图片....

delay      Intege        默认值：0 -定义的延迟来显示和隐藏的元素，淡入淡出和幻灯

delay      InInteger     默认值：0 -定义的延迟，显示元素，淡入淡出和幻灯

delayOut   Integer       默认值：0 -定义的延迟隐藏元素，淡入淡出和幻灯

easing     String        默认值：空 -定义在和元件出动画，仅供幻灯片

easingIn   String        默认值：空 -定义在元素的动画，为slideonly

easingOut  String        默认值：空 -定义元素的动画出来，因为只有一张幻灯片

fadeOutAfter  Integer    默认值：0 -定义之后，固定元素淡出时间

fontColor     String     默认值：000000 -定义字体的颜色。

fontSize      String     默认值：16像素 -定义字体的大小。

height        Integer    默认值：30 -元素的高度。

inTime        Integer：  默认值：200 -以毫秒为单位显示该元素的时间。

left          Integer 默认值： 0元素的左侧位置。

opacity       Float 默认值：0.7默认值浮动元素的不透明度。

outTime       Integer 默认值：200的元素消失在毫秒时间。

padding       Array 默认值： [0] -定义元素的边框和内容的元素之间的空间。

paddingTop    Integer 默认值： 0 -填充的顶部边框。

paddingRight  Integer 默认值： 0填充的右边界。

paddingBottom   Integer 默认值： 0填充的底部边界。

paddingLeft     Integer 默认值： 0填充到左边界。

sldeFrom      String 默认值： 底 - 定义从何处元素滑动

slideTo       String 默认值： 底 - 定义到该元素的幻灯片。

textAlign     String 默认值：左 - 在元素中的文本的对齐方式。

time          Integer 默认值：200 - 时间以毫秒为单位的元素出现和消失。

top           Integer 默认值： 0 - 元素的顶部位置。

width         String  默认值：全 - 元素的宽度。

有了这样一个插件和对应的调用方法，在类似的页面中使用起来就会非常方便。