当前位置:

[原创]jQuery/Zepto 图片预览插件

本文最后更新于2017-11-24,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共937个字,读完预计3分钟。

昨天下午空闲的时候,逛了逛掘金,正好看到他们网站每篇文章的图片都可以单独点击预览,觉得这种功能很常用,于是我也写了个类似的插件,以便今后使用。

用到的技术:jQuery/Zepto, ES6, gulp;

功能以后有时间会慢慢完善,目前PC上单图模式预览应该够用的,代码在此就不贴了,有兴趣的朋友可以看看源码:https://github.com/hehaibao/img-preview

预览地址:https://hehaibao.github.io/img-preview/

插件说明:

1. ES6语法,支持jQuery和Zepto;
2. 使用简单,只要在dom元素上加入data-pic原图地址,并引入JS即可;
3. 目前支持单图预览,后期有时间将会加入多图预览;
4. 支持自定义img标签上的字段[大图链接,大图标题,大图描述];
5. 支持黑色浮层是否展示;
6. 压缩后imgPreview.min.js仅2kb,未压缩文件是6kb;
7. 支持移动端单张预览;
8. 支持gulp压缩js;

如何使用?

1 引入jQuery或Zepto

1
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

2 引用我写好的默认CSS

1
2
3
4
5
6
7
<style>
.img-preview-mask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 9998;background-color: rgba(0,0,0,.5);}
.img-preview-popover{position: fixed;z-index: 9999;}
.img-preview-foot{width: 96%;padding:0 2%;position: absolute;bottom: 0;background-color: rgba(0,0,0,.5);}
.img-foot-title{font-size: 16px;color: #fff;margin-top: 5px;}
.img-foot-desc{font-size: 12px;color: #fff;margin-top: 5px;line-height: 24px;}
</style>

3 引入imgPreview.min.js, 目录根据你自己项目来;

1
<script src="js/imgPreview.min.js"></script>

4 最后一步

1
2
3
<script>
   $(() => $.imgPreview());
</script>

有什么问题欢迎留言讨论,谢谢。

版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句