悬停改变图片地址

最新推荐文章于 2023-08-28 10:57:42 发布

螺旋铭

最新推荐文章于 2023-08-28 10:57:42 发布

阅读量732

点赞数

分类专栏： Js 文章标签：悬停换图片

本文链接：https://blog.csdn.net/xm_law/article/details/95071442

版权

Js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

场景需求：
例如有一些需求是当鼠标移入容器时，容器里的图片需要换成悬停时的图片，然后比较死板的写法，如下：
在这里插入图片描述
明明代码之间差不多，只是在.png前面多加了个_hover表示悬停而已，代码冗余繁琐的要死，我们干嘛不直接用js控制呢？那就用正则吧。

 <body>
  <div class="img">
    <img src="gongan@2x.png" alt="">
  </div>
</body>   
    
    hoverImg();
      function hoverImg() {
        var hoverUrl;
        var index;
        var url;
        $(".img img").hover(function () {
          var re = /.png$/;
          if (!index && !url) {
            url = $(this).attr("src");
            index = url.match(re).index;
          }
          var subUrl = url.substring(0, index);
          hoverUrl = url.replace(url, subUrl + '_hover.png')
          $(this).attr("src", hoverUrl)
        }, function () {
          $(this).attr("src", url)
        })
      }

执行上面的操作之后，我们只需要改一下文件名，在后面加_hover就完事。哪有那么多为什么鸭，嘻嘻~~
在这里插入图片描述

螺旋铭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
悬停改变图片地址

场景需求：例如有一些需求是当鼠标移入容器时，容器里的图片需要换成悬停时的图片，然后比较死板的写法，如下：明明代码之间差不多，只是在.png前面多加了个_hover表示悬停而已，代码冗余繁琐的要死，我们干嘛不直接用js控制呢？那就用正则吧。 <body> <div class="img"> <img src="gongan@2x.png" alt="...
复制链接

扫一扫

专栏目录