描述:captify.tiny.js鼠标滑到图片上显示文字,而且也支持很多效果。请用参数就可以看到!
图片展示:
兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:http://iwantaneff.in/repo/plugins/effects-ui/captify/index.html
JS下载:http://www.ijquery.cn/js/captify.tiny.js
预览: http://www.ijquery.cn/study/demo/captify
打包下载:http://www.ijquery.cn/js/captify/captify.zip
参数说明:用英文描述了
speedOver: 'fast', // speed of the mouseover effect
speedOut: 'normal', // speed of the mouseout effect
hideDelay: 500, // how long to delay the hiding of the caption after mouseout (ms)
animation: 'slide', // 'fade', 'slide', 'always-on'
prefix: '', // text/html to be placed at the beginning of every caption
opacity: '0.7', // opacity of the caption on mouse over
className: 'caption-bottom', // the name of the CSS class to apply to the caption box
position: 'bottom', // position of the caption (top or bottom)
spanWidth: '100%' // caption span % of the image
JS引用代码:(第一步引用JS)
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/captify.tiny.js"></script>
<script type="text/javascript">
$(function(){
$('img.captify').captify();
});
</script>
[/js]
HTML代码:(第二步将图片加入class属性-captify,加上alt属性)就这么简单!
[html]
<div>
<a href="#"><img src="images/one.jpg" width="240" height="160" alt="图片一" /></a>
<a href="#"><img src="images/two.jpg" width="240" height="160" alt="图片二" /></a>
</div>
[/html]
CSS代码:(第三步:引入CSS样式)
[css]<link rel="stylesheet" type="text/css" href="capity.css" />[/css]
具体如下:
[css]
.caption-top, .caption-bottom {
color: #ffffff;
padding: 1.2em;
font-weight: bold;
font-size: 13px;
font-family: arial;
cursor: default;
border: 0px solid #334143;
background: #000000;
text-shadow: 1px 1px 0 #202020;
}
.caption-top {
border-width: 0px 0px 8px 0px;
}
.caption-bottom {
border-width: 8px 0px 0px 0px;
}
.caption a, .caption a {
border: 0 none;
text-decoration: none;
background: #000000;
padding: 0.3em;
}
.caption a:hover, .caption a:hover {
background: #202020;
}
.caption-wrapper {
float: left;
}
[/css]