当前位置: 首页 » 案例分享 » [原创]jQuery/Zepto 图片预览插件
字号调整:

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

haibao 案例分享 2017-11-24 15:06:54 505 百度已收录
历史上的今天:9月19日 - 1928年,米老鼠首次亮相

凌晨好, 本文除去代码部分,共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 许可协议。转载请注明出处!

一条评论

发表评论

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