jquery - jQuery 图片标题

Question

我正在尝试使用 jquery 找到一种简单的方法，使用 alt 或 title 属性（以更好的做法为准）为选定的幻灯片或淡入淡出的图像添加透明标题，这也不会添加额外的 div。

有没有人能想到一个简单的方法来做到这一点？

Answer 1

我以前用过这种方法。似乎工作得很好，而且您不会不断地创建和删除元素，只是移动和更改一个元素的内容。

查看工作中的小提琴

从您的单个空 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