JS之使用原生JS加CSS样式实现图片点击放大缩小功能

原创

于 2018-06-29 16:47:39 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS

本文介绍了如何使用纯JavaScript和CSS实现图片点击后放大缩小的效果。作者在找不到合适的图片放大插件后，决定自己编写，通过给img标签添加事件监听器，并动态修改CSS样式，实现了优雅的图片放大功能。当点击图片时，原图片会被一个id为bigImg的img标签替换，并调整为90%宽度显示。再次点击图片，则隐藏该div，完成图片缩小。此外，还分享了两种鼠标悬停时的样式效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天网站测试的时候发现了博客中的图片的有的太小了看不清楚，随想到了使用一个图片放大的插件，不过度娘了好几分钟以后实在没有找到比较优雅的。然后就自己写了一个，在这里分享给大家。

对比我度娘的结果，此功能实现没有基于任何框架，原生js、css和html就可以实现,相信聪明的你看了就明白了。

因为我的网站不是博客么，当我的一篇博客从后台查询出来的时候，有一个字段会记录博客的正文。我们需要放大的图片就在这个正文里了。

首先我先调用了一个方法为我的正文做了一下转换：

imgHander(context) {
    var subStr=new RegExp('<img','ig');
    return context.replace(subStr, "<img onclick='picBig(this)' ");
}
var subStr=new RegExp('<img','ig');
    return context.replace(subStr, "<img οnclick='picBig(this)' ");
}