我正在创建一个图像库,将替代文本显示为每个图像的标题。现在我有一些东西可以使用 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 很陌生,我意识到我的代码现在不是最好的,所以请多多包涵。我非常愿意接受建议,并且非常愿意学习如何让它发挥作用。干杯!