CSS开发技巧(三)：图片点击缩放

前言

利用CSS实现图片的点击缩放是一个很值得研究的效果。在某些业务需求场景中，我们可能并没有足够的空间展示过大的图片，这就需要限制图片容器的宽度和高度。然而图片限制了宽度，一些图片的细节便又无法看清。

实现这种需求的一种直观方式是固定图片宽高，然后提供点击缩放的功能，这是本文要讨论的要点。

需要额外说明的是，CSS实现业务需求的方式是灵活的，这与开发者的功底也是密切相关的，实现上述的业务需求并非只有一种方式，甚至限于作者水平，以下所述也是不完善的，仅作分享，读者可自行探索和发挥。

一、需求关键点

1、固定宽高

2、点击放大

3、再次点击缩小

4、优先用CSS实现

这里强调了优先使用CSS，这是因为同样的效果，使用CSS实现一般而言性能更好。况且使用JS直接修改样式，易导致维护时难以定位问题。在开发中，建议实现JS和CSS的松耦合。这对代码优雅有利，利于后期维护。

二、HTML结构

    <div class="img-container">
        <img src="./test.jpg" alt="案例图片" class="img">
    </div>

以上，只有两层结构，我们的CSS都作用于这两层元素上。个人观点，HTML结构越简单越加清晰。只有当简单的HTML实在无法实现相关业务需求时，才建议添加元素用于实现复杂效果。

三、CSS代码

1、给容器设置固定宽高

2、将img元素设置为容器的宽高

3、设置img元素放大时的样式

4、适当使用定位

        .img-container{
            position: relative;
            width: 100px;
            height: 100px;
        }
        .img-container .img{
            height: 100%;
            width: 100%;
            cursor: pointer;
        }
        .img-container .img.active{
            position: absolute;
            height: 400%;
            width: 400%;
        }

四、JS代码

1、本文主要讨论CSS，但要实现图片点击缩放，光使用CSS hover伪类的体验并不佳，鼠标移开就失去放大效果，无法悬停，因此使用JS的点击事件来进行监听。

2、JS部分的主要思想是改变图片的类名，这样可以实现JS和CSS的松耦合，避免JS直接改变样式，利于维护。

        var img = document.getElementsByClassName('img');
        // 点击图片本身
        img[0].addEventListener('click',function(e){
            // 防止被document监听到
            e.stopPropagation();
            const isExpand = this.className.indexOf('active') !== -1;
            if (!isExpand) {
                this.className += ' active';
            } else{
                this.className = this.className.replace('active', '');
            } ;
        });
        // 点击其他位置
        document.addEventListener('click',function(e){
            img[0].className = img[0].className.replace('active', '');
        });

以上JS部分显得有些繁琐，事实上，这是使用原生JS时几乎必然会呈现的特点。假如使用Vue.js这样的双向绑定框架，对类名进行绑定，那么JS将简单到只需几句代码。或者使用jquery这样的库，那么也将极大简化。

五、优化改进

以下是几个可以适当优化提升的地方：

1、设置酷炫的动画效果；

2、兼容性问题。