Question

我正在创建一个图片库，将alt文本显示为每个图片的标题。现在我有一些东西使用mouseenter / mouseleave函数来获得这个想要的结果。

JS

$(function () {
    $(".thumb").mouseenter(function () {
        var $t = $(this);
        var $d = $("<div>");
        $d.addClass("desc").text($t.attr("alt")).css({
            width: $t.width(),
            height: $t.height() - 20,
            top: $t.position().top
        });
        $t.after($d).fadeTo("fast", 0.3);
        $d.mouseleave(function () {
            $(this).fadeOut("fast", 0, function () {
                $(this).remove();
            }).siblings("img.thumb").fadeTo("fast", 1.0);
        });
    });
});

HTML

<div>
    <img class="thumb" src="myImage1" alt="caption">
</div>
<div>
    <img class="thumb" src="myImage2" alt="caption">
</div>

以下是关于字幕在视觉上的外观方面的一个例子。 http://jsfiddle.net/CTQvN/168/

基本上我希望能够通过单击页面上某个看起来像按钮的链接来同时显示多个图像的标题，而不是鼠标中心功能，以便我可以在没有鼠标的情况下将其他设备用于智能手机。我想保持当前脚本的视觉美感，同时更新到目前为止我所拥有的功能部分。我是JavaScript的新手，我意识到我的代码现在不是最好的，所以请耐心等待。我非常乐于接受建议，我非常愿意学习如何让它发挥作用。干杯！

Answer 1

这是一种可能性：

EXAMPLE

$('.thumb').click(function() {
    $(this).trigger('mouseenter'); 
});

或者如果你想要一个按钮：

EXAMPLE

$('button').click(function() {
    $('.thumb').trigger('mouseenter'); 
});

如何使用jquery点击功能使用'alt'文本创建图像标题

1 个答案: