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

haibao 案例 2017-11-24 15:06 171
知人者智,自知者明。胜人者有力,自胜者强。知足者富。强行者有志。

欢迎您,我猜是来自的朋友! 本文共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>

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

本文标题:[原创]jQuery/Zepto 图片预览插件

本文地址:http://www.hehaibao.com/img-preview-js/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

一条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>