0

我正在创建一个图像库，将替代文本显示为每个图像的标题。现在我有一些东西可以使用 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/

基本上，我希望能够通过单击页面上某个看起来像按钮的链接而不是 mouseenter 功能来同时显示多个图像的标题，这样我就可以在没有鼠标的情况下将其他设备适应智能手机。我想保持当前脚本的视觉美感，同时更新我目前所拥有的功能部分。我对 JavaScript 很陌生，我意识到我的代码现在不是最好的，所以请多多包涵。我非常愿意接受建议，并且非常愿意学习如何让它发挥作用。干杯!

4

1 回答 1

1

这是一种可能性：

例子

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

或者，如果您想要一个按钮：

例子

$('button').click(function() {
    $('.thumb').trigger('mouseenter'); 
});
于 2013-07-31T18:27:14.063 回答