最新消息:

第30款插件:captify.tiny.js 只需三步即可实现鼠标滑到图片上显示文字

图片幻灯插件 杨红伟 2791浏览 0评论

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

11

兼容浏览器: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]

 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址