之前给一个一朋友改版网站时,他们网站利用的是直接连接到原图
浏览器又打开一个标签页来显示这张图片。
显得不太友好。
直接在页面本身来弹出原图的话相对来说比较符合用户体验。

那么如何在原来页面上打开原图呢?

首先我们须要安装layui,我们要利用它的弹出层组件。

html点击图片弹出网页若何在做网站时点击某张图片弹出来年夜图应用layer轻松解决 PHP

在须要利用的页面引入layui的css和js后。
就可以开始操作了。

在须要弹出原图的图片上新增一个onclick方法。
方法名可以自定义。
在方法里面我们将原图的地址放入,作为参数可以在调用的时候得到相应的图片地址。

利用layer弹出层里面的photos可以将图片以相册的形式来展示出来。
官方给的样例是数组形式的一组相册,本日我们先来看单个图片如何弹出。

layer.photos里面的photos我们须要配置里面的data。
这个是须要显示的图片。
根据文档你只须要将里面的src通报上我们刚才通报过来的参数即可。
里面的anim则是弹出图片的类型,大家可以去试一下。
0-6之间的数字。

到此就可以来看当作果了。
在写方法之前,一定要将layer在layui中引入一下。