我正在尝试使用 jquery 找到一种简单的方法,使用 alt 或 title 属性(以更好的做法为准)为选定的幻灯片或淡入淡出的图像添加透明标题,这也不会添加额外的 div。
有没有人能想到一个简单的方法来做到这一点?
我以前用过这种方法。似乎工作得很好,而且您不会不断地创建和删除元素,只是移动和更改一个元素的内容。
从您的单个空 div 开始:
<div id='caption'></div>
JS:hover 和 mouseout 上的事件侦听器,用于定位 div、编写标题并将其淡入。
$('img').hover(function(){
var yoffset = $(this).height();
var width = $(this).width();
var coords = $(this).offset();
$('#caption').html($(this).data('caption'))
.width(width)
.animate({
top: coords.top + yoffset - $('#caption').height(),
left: coords.left
}, 0, function(){
$(this).animate({
opacity: 'show'
}, 200);
});
});
$('img').mouseout(function(){
$('#caption').animate({
opacity: 'hide'
}, 100);
});
该 div 的 CSS:绝对定位,因此您可以将其放置在任何地方,确保它没有嵌套在另一个 div 中,以确保它以应有的方式工作。
#caption {
position: absolute;
z-index: 99;
display: none;
background: rgba(0,0,0,0.6);
color: white;
padding: 2px;
}
至于是否使用 title 或 alt 属性,您可以使用 .attr 而不是 .data,但这样您可以指定标题文本而不会造成任何伤害。HTML5 数据属性与 jQuery 一起使用如下
<img src='#' data-caption='This is some caption text' />
然后像这样访问:
$('img').data('caption'); //returns our caption text