在fancybox画廊内的鼠标悬停时交换图像可以通过以下步骤实现:
<a class="fancybox" href="大图.jpg">
<img src="小图.jpg" alt="图片" />
</a>
$(document).ready(function() {
// 初始化fancybox
$(".fancybox").fancybox();
// 鼠标悬停时交换图像
$(".fancybox").hover(
function() {
// 获取大图链接
var bigImage = $(this).attr("href");
// 获取小图链接
var smallImage = $(this).find("img").attr("src");
// 将小图链接替换为大图链接
$(this).find("img").attr("src", bigImage);
// 将大图链接替换为小图链接
$(this).attr("href", smallImage);
},
function() {
// 鼠标离开时恢复原图
var bigImage = $(this).attr("href");
var smallImage = $(this).find("img").attr("src");
$(this).find("img").attr("src", smallImage);
$(this).attr("href", bigImage);
}
);
});
以上代码中,通过hover()函数来监听鼠标悬停和离开事件,当鼠标悬停时,将小图链接替换为大图链接,将大图链接替换为小图链接;当鼠标离开时,恢复原图。
这样,当鼠标悬停在fancybox画廊内的图片上时,就会实现图像的交换效果。
推荐的腾讯云相关产品:腾讯云对象存储(COS)
领取专属 10元无门槛券
手把手带您无忧上云