淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery是一种JavaScript库,其中包含许多用于网页开发的常用函数和特性。其中之一是用鼠标悬停显示原图的功能。在这篇文章中,我们将介绍如何使用jQuery来实现这个功能。

$(document).ready(function() {
$('img').hover(function() {
var src = $(this).attr('src');
$(this).data('original', src);
$(this).attr('src', src.replace(/^(.+)\.([a-z]+)$/, "$1-hover.$2"));
}, function() {
$(this).attr('src', $(this).data('original'));
});
});

如上所示,我们首先定义一个函数,当鼠标悬停在图像上时,它将替换图像的文件名以显示原图。当鼠标移开时,它将恢复原始图像名以显示原始图像。

使用$('img')选择器,我们添加了此功能的目标元素。一旦鼠标悬停在图像上,我们可以使用.attr()函数来获取图像的当前源,并将其存储为原始数据以供稍后恢复。然后,我们使用.replace()函数来将当前图像源的文件名替换为“-hover”,并将其设置为新的图像源,以显示悬停状态的图像。

鼠标移开后,我们只需使用.attr()函数将原始数据的值作为新源传递给图像即可实现恢复图像为原始状态的功能。

这是一个简单且易于实现的jQuery功能,它可以改善用户的网站浏览体验,增加美感和交互性。