我的博客需要用到一个内容的图片预览插件,网上找了许多的插件,感觉要么太大,要么没有我想要的功能,所以后来想想还是自己写一个吧,大小10K,因为是用webpack打包的,把css都打包进去了,可以根据图片的大小,使用居中在屏幕中间。
使用方法:
首先实例化一个实例new ImgZooom({el: '.wrapper'})
参数是一个对象,el
的值可以是id、类、标签,他会根据你传的节点,来限制预览范围。
引入方式
- 直接引入js
- 通过import、require来导入js
首先说下直接引入js的:
直接引入js,会暴露一个全局的变量ImgZoom
<div class="wrapper">
<p><img src="http://p3x5m4etk.bkt.clouddn.com/1525961919783cundgvimuy5" alt=""></p>
<p><img src="http://p3x5m4etk.bkt.clouddn.com/1525965506130x60ht5q33ek" alt=""></p>
<div><img src="http://p3x5m4etk.bkt.clouddn.com/1525967944576w7m43b4dhon" alt=""></div>
</div>
new ImgZoom({
el: '.wrapper'
})
通过import、require来导入js:
import ImgZoom from './img-zoom.js';
//或者
const ImgZoom = require('./img-zoom.js');
//然后就可以通过定义的变量来实例一个实例化了,两种方式都是可以引入的。
new ImgZoom({
el: '.wrapper'
})
下面放一张效果图来感受下:
其实感觉还是有很多不足的地方,比如: 切换的时候没有转场动画,让人感觉很生硬的感觉,还有样式不够多,缩略图预览啊,自动播放啊,这些都可以加上去,我后面就是想通过插件的方式来把这些功能加上去。这样子就不会感觉这个插件很臃肿这样子。
如果有更好的想法,或者有bug的地方,欢迎大家在评论区留言,感谢大家的阅读。