jquery 鼠标显示文件

引用：http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=36&page=1&extra=#pid41

描述：captify.tiny.js鼠标滑到图片上显示文字，而且也支持很多效果。请用参数就可以看到！
图片展示：

兼容浏览器：IE6+/Firefox/Google Chrome
官方链接：http://iwantaneff.in/repo/plugins/effects-ui/captify/index.html
JS下载：http://ijquery.360sites.cn/js/captify.tiny.js
预览： http://ijquery.360sites.cn/demo/captify
打包下载：http://ijquery.360sites.cn/js/captify/captify.zip
参数说明：用英文描述了

1. speedOver: 'fast',  // speed of the mouseover effect
2. speedOut: 'normal',  // speed of the mouseout effect
3. hideDelay: 500,         // how long to delay the hiding of the caption after mouseout (ms)
4. animation: 'slide',                 // 'fade', 'slide', 'always-on'
5. prefix: '',                 // text/html to be placed at the beginning of every caption
6. opacity: '0.7',         // opacity of the caption on mouse over                                
7. className: 'caption-bottom',         // the name of the CSS class to apply to the caption box
8. position: 'bottom', // position of the caption (top or bottom)
9. spanWidth: '100%' // caption span % of the image

复制代码

JS引用代码：（第一步引用JS）

1. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script>
2. <script type="text/javascript" src="http://ijquery.360sites.cn/js/captify.tiny.js"></script>
3. <script type="text/javascript">
4.         $(function(){
5.                 $('img.captify').captify();
6.         });
7. </script>

复制代码

HTML代码：（第二步将图片加入class属性-captify，加上alt属性）就这么简单！

1. <div class="images">
2.         <a href="#"><img class="captify" src="images/one.jpg" width="240" height="160" alt="图片一" /></a>
3.         <a href="#"><img class="captify" src="images/two.jpg" width="240" height="160" alt="图片二" /></a>
4. </div>

复制代码

CSS代码：（第三步：引入CSS样式）

1. <link rel="stylesheet" type="text/css" href="capity.css" />

复制代码

具体如下：

1. .caption-top, .caption-bottom {
2.         color: #ffffff;       
3.         padding: 1.2em;       
4.         font-weight: bold;
5.         font-size: 13px;       
6.         font-family: arial;       
7.         cursor: default;
8.         border: 0px solid #334143;
9.         background: #000000;
10.         text-shadow: 1px 1px 0 #202020;
11. }
12. .caption-top {
13.    border-width: 0px 0px 8px 0px;
14. }
15. .caption-bottom {
16.    border-width: 8px 0px 0px 0px;
17. }
18. .caption a, .caption a {
19.         border: 0 none;
20.         text-decoration: none;
21.         background: #000000;
22.         padding: 0.3em;
23. }
24. .caption a:hover, .caption a:hover {
25.         background: #202020;
26. }
27. .caption-wrapper {
28.         float: left;
29. }

复制代码