layer图片显示小栗子

在网页查看图片的时候,总是无法点击放大查看,今天在网上突然搜到一个插件,layer,然后自己测试了一下,感觉还不错,所以写个demo,

官网链接:http://layer.layui.com/

首先从官网下载下来安装包,

layer图片显示小栗子

解压后的样子,然后把layer这个文件夹拉到你的项目中,

layer图片显示小栗子

前台代码:

首先引入js和css,别把js引入错了,mobile是手机端的,我刚开始就是引入错了,一直报错,web端就引入首页下的js

<div id="layer-photos-demo" class="layer-photos-demo">
        <img width="70px" height="30px" layer-src="写自己的" src="写自己的" alt="查看图片">
</div>
//调用示例 点击显示图片
layer.ready(function(){ //为了layer.ext.js加载完毕再执行
    layer.photos({
        photos: '#layer-photos-demo'
        ,shift: 5 //0-6的选择,指定弹出图片动画类型,默认随机
    });
});
最后在放一张效果图

layer图片显示小栗子

layer图片显示小栗子


对了,官方API:http://layer.layui.com/api.html#layer.photos