点击图片放大恢复功能

开发过程中,有点击图片需要展示图片的需求。因为之前全部是后台开发,没有接触过页面的设计。
为此专门记录一下。
首先是获取图片,为图片添加点击事件。获取图片的原始参数,然后根据各个参数设置放大的图片参数。然后再次点击,关闭展示层。根据窗口的高度和宽度,减去对应的放大后图片的高度和宽度,然后除以2,计算图片居中显示位置。最后设置展示层的背景为黑色半透明。使之图片显示的更为清晰。
点击图片,放大缩小。原生js






        

你可能感兴趣的:(点击图片放大恢复功能)