我的博客需要用到一个内容的图片预览插件,网上找了许多的插件,感觉要么太大,要么没有我想要的功能,所以后来想想还是自己写一个吧,大小10K,因为是用webpack打包的,把css都打包进去了,可以根据图片的大小,使用居中在屏幕中间。

使用方法:

首先实例化一个实例new ImgZooom({el: '.wrapper'})参数是一个对象,el的值可以是id、类、标签,他会根据你传的节点,来限制预览范围。

引入方式

  1. 直接引入js
  2. 通过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的地方,欢迎大家在评论区留言,感谢大家的阅读。