一、需求

一直想给博客加一个图片放大镜,点击图片,能够全屏显示图片的宽度。

如果图片本身很宽,超出了屏幕,则只显示屏幕宽度(最终选择了显示屏幕宽度的90%)

如果图片没有超过屏幕,则默认只显示图片原来的大小。

因为在文章中的图片,很多是限制大小显示的。

不想用jquery那些功能复杂的插件,只需要一个放大镜的功能,干脆就自己写了一个。

兼容 IE9+ 即可

二、实现

1、 dom操作

DOM选择使用了 querySelector();,这样的目的是为了能够传入不同类型的img选择条件,从而在不改变原来的dom的情况下,直接使用放大镜。

2、 放大

放大镜的容器定位为position:fixed,图片的垂直居中使用position:absolute实现:

img {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

3、封装模式

为了方便省事儿, 我直接封装成一个对象,对象的名字可以自由的更改,不过为了防止命名冲突,我用了个PostbirdImgClass ,我想除了这个插件,不会再有其他对方会用到吧。

4、动画

默认没有动画,出现和隐藏使用 display控制。

动画就定死了,更改的话可以直接修改js里面的css部分(需要copy出来,格式化之后更改,再写入即可。当然,覆盖也行)。

动画使用css3 animation , 因此 IE9 是没有动画的。

4、没有css文件

为了减少请求,我直接将几个css写入 style,然后加载到head中。

三、效果:

本站所有图片放大都是用这个插件实现的。

四、代码及使用方式

github:https://github.com/postbird/PostbirdImgGlass

说明:

*   图片放大镜
*   Author : Postbird
*   Website: http://www.ptbird.cn
*   License: MIT

引入方式:

src="./js/postbird-img-glass.js

使用方式:

// 示例中使用的方式
PostbirdPictureMagnifyingGlass.init({
    domSelector:".img-container img",
    animation:true
});

参数说明:

init({})传入参数为对象
* domSelector  - dom选择器             默认 img  
* width        - 放大后图片宽度        默认 auto
* height       - 放大后图片高度        默认 auto
* boxClassName - 放大镜的容器的class   默认 postbird-img-glass-box
* boxBgColor   - 放大镜容器的背景色   默认  rgba(0,0,0,0.8)
* animation    - 是否开启CSS3动画     默认 false IE10+ 才有效

注意事项:

1. animation 使用css3动画,需要 IE10+
2. 最低支持 IE9 ,事件监听使用 addEventListener
3. 需要在文档加载完成后才能进行操作 
4. css样式及动画可以将css复制并格式化后,自定义。