jQuery下通过replace字符串替换实现大小图片切换

为了实现在网页中切换大小两张图片，我们可以使用jQuery的replace函数进行图像文件名的字符串替换。下面是详细攻略：

第一步：准备两张不同尺寸的图片

在本例中，我们准备的是两张猫咪图片，一张尺寸较大，另一张尺寸较小。图片的大小尺寸可以根据实际需求自行设置。

<img src="big-cat.jpg" class="cat-image" data-small-src="small-cat.jpg" />

我们给大图设置了默认的src属性为"big-cat.jpg"，同时为其增加了一个自定义属性" data-small-src"，在这个属性中存放小图的路径"small-cat.jpg"。这个属性的作用是在后面的JavaScript代码中通过jQuery来获取。

第二步：使用jQuery获取图片元素

通过$(selector)函数获取图片元素，并使用.attr()函数获取存放小图路径的data-small-src属性。

var image = $('.cat-image');
var smallSrc = image.attr('data-small-src');

第三步：为图片元素绑定鼠标事件

使用.on()函数为图片元素绑定mouseenter和mouseleave事件，鼠标进入时触发mouseenter事件，鼠标离开时触发mouseleave事件。

image.on('mouseenter', function() {
  // 鼠标进入图片时，替换图片路径为小图路径
  image.attr('src', smallSrc);
}).on('mouseleave', function() {
  // 鼠标离开图片时，替换图片路径为大图路径
  image.attr('src', 'big-cat.jpg');
});

此时，当鼠标进入图片区域时，图片的src属性会被替换为小图的路径，当鼠标离开图片区域时，图片的src属性又会被替换为大图的路径，从而实现了大小两种图片的切换。

下面是完整的示例代码，我们使用了两对图片，分别为猫咪和花朵。当鼠标进入图片区域时，会将图片路径替换为对应的小图路径，当鼠标离开图片区域时，再将图片路径替换为对应的大图路径。

<img src="big-cat.jpg" class="cat-image" data-small-src="small-cat.jpg" />
<img src="big-flower.jpg" class="flower-image" data-small-src="small-flower.jpg" />

<script>
  $(function() {
    var catImage = $('.cat-image');
    var flowerImage = $('.flower-image');
    var catSmallSrc = catImage.attr('data-small-src');
    var flowerSmallSrc = flowerImage.attr('data-small-src');
    catImage.on('mouseenter', function() {
      catImage.attr('src', catSmallSrc);
    }).on('mouseleave', function() {
      catImage.attr('src', 'big-cat.jpg');
    });
    flowerImage.on('mouseenter', function() {
      flowerImage.attr('src', flowerSmallSrc);
    }).on('mouseleave', function() {
      flowerImage.attr('src', 'big-flower.jpg');
    });
  });
</script>