zoukankan      html  css  js  c++  java
  • Layui 内置方法

    相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入,如下:

    1 $.getJSON('/jquery/layer/test/photos.json', function(json){
    2   layer.photos({
    3     photos: json
    4     ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
    5   });
    6 }); 

    返回的json需严格按照如下格式:

     1 {
     2   "title": "", //相册标题
     3   "id": 123, //相册id
     4   "start": 0, //初始显示的图片序号,默认0
     5   "data": [   //相册包含的图片,数组格式
     6     {
     7       "alt": "图片名",
     8       "pid": 666, //图片id
     9       "src": "", //原图地址
    10       "thumb": "" //缩略图地址
    11     }
    12   ]
    13 }

    如果是直接从页面中获取图片,那么需要指向图片的父容器,并且你的img可以设定一些规定的属性(但不是必须的)。

     1 //HTML示例
     2 <div id="layer-photos-demo" class="layer-photos-demo">
     3   <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
     4   <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
     5 </div>
     6  
     7 <script>
     8 //调用示例
     9 layer.photos({
    10   photos: '#layer-photos-demo'
    11   ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
    12 }); 
    13 </script>


    版权声明:本文为CSDN博主「杨林伟」的原创文章
    原文链接:https://blog.csdn.net/qq_20042935/article/details/89448595

     

  • 相关阅读:
    Windows 软件推荐大全【all】
    网络基础之IP地址和子网掩码
    Windows 常识大全【all】
    FinalShell使用---Xshell的良心国产软件
    雷军语录:写程序有写诗一样的感觉
    Proxyee-down的下载与安装教程
    QPointer,QSharedPointer,QWeakPointer的区别
    Android Auto开发初探
    车载摄像头 原像 镜像
    Bluetooth协议栈学习之SDP
  • 原文地址:https://www.cnblogs.com/moppet/p/12467867.html
Copyright © 2011-2022 走看看