Question

我正在尝试使用jquery找到一种简单的方法，使用alt或title属性（无论哪种更好的练习）为选定的图像添加透明标题，以滑动或淡化，这也不会增加额外的的div。

有没有人有一个他们能想到的简单方法呢？

Answer 1

我以前用过这个方法。似乎工作得很好，你不是经常创建和删除元素，只是移动和更改元素的内容。

从您的单个空div开始：

<div id='caption'></div>

JS：悬停和鼠标移动时的事件监听器，定位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，但这样你就可以指定标题文本而不会伤害任何东西。使用jQuery

时，HTML5数据属性使用如下

<img src='#' data-caption='This is some caption text' />

然后像这样访问：

$('img').data('caption'); //returns our caption text

Jquery图像标题

1 个答案: