简单实现点击图片放大的功能

背景：想在app中加上点击缩略图放大的效果，但是不想导入大量的JS ，也无需哪些复杂的插件，于是自己手写了一个很简单的实现，在这里记下来。

代码很简单，还有很多优化空间，时间有限，就没有优化了

1 . 先准备大图的位置

大图是fixed于整个界面，只修改其中的src以达到修改图片的目的

其中：

<i class="iconfont icon_close_right_c"></i>
//这代码是阿里矢量图下载的

完整:

        <!--大图位置--><div class="imgcontent"><div id="_big_img"><div class="big_close"><i class="iconfont icon_close_right_c"></i></div><img id="_big_src" src=""></div></div>

2 . 缩略图代码

小图位置:
<li class="items_content_img" pid="ABCD"><div class="img_item_c"><img src="文件缩略图路径" pid="可扩展文件大图路径"></div><div class="img_item_c"><img src="文件缩略图路径" pid="可扩展文件大图路径"></div>
</li>

此处的pid 路径我们有用到，这里可以优化为img 正常显示缩略图，而pid放完整的大图路径，可以优化加载速度

3. 相关JS

               $('#list_add_class').on("click", ".items_content_img img", function () {var _href = $(this).attr("src");$("#_big_src").attr("src", _href).parents(".imgcontent").fadeIn("1000");});$('.icon_close_right_c').on("click", function () {$(".imgcontent").fadeOut()("1000");});

代码很简单，点击缩略图则调出隐藏的大图Div (大图DIV一开始是隐藏的)
为了优化显示效果，使用了fadein，fadeout

4.补充CSS代码

.items_content_img{width: 100%;}.items_content_img img{width: 27vw;margin-left: 1.5vw;max-height: 14vw;border: #ccc 2px solid;}#_big_img{position: fixed;width: 80%;margin-top: 15%;margin-left: 10vw;}#_big_img img{width: 100%;}.icon_close_right_c{float: right;color: #ff0000;font-size: 10vw;}.imgcontent{height: 200%;opacity: 0.9;background: #fff;display: none}.img_item_c{float: left;}

5.总结

这些就是完整流程，代码不难，但是实现的效果还是不错的。

时间有限，就没有做优化，这种方式可以实现不需要太多JS就简单的实现看到详细的大图

简单实现点击图片放大的功能相关推荐

点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
实现点击图片放大查看功能
1.html 代码 <div id="imgEnlargeDiv" style="display: none; text-align: center;positio ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
百度移动优化：关于移动端点击图片放大有多少人注意？
百度移动搜索落地页体验白皮书4.0于2018年08月15日发布有多少人注意到白皮书最下面的这短短的60字? 好多网站都存在点击图片不可放大,有多少站长注意这个细节问题? 关于加这个功能确实挺麻烦,不懂 ...
Android 点击图片放大至全屏再次点击关闭过度动画 Shared Element效果（共享元素效果）
Android 点击图片放大至全屏再次点击关闭过度动画最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
手机端点击图片放大特效-PhotoSwipe插件
PhotoSwipe插件官方网站 http://www.photoswipe.com/ PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能但有一点不太好的是图片放大后再单击不 ...
php 鼠标点击图片放大,鼠标移入放大图片预览效果实现
商城项目中,有鼠标移入图片放大的功能,研究一下实现 Image zoom body { display: flex; justify-content: center; align-items: cen ...
点击图片放大至原始图片大小
有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w = parseInt($(window) ...