Home > Article > Web Front-end > Layer front-end component picture display function
This time I bring to you, what are the precautions, the following is a practical case, let's take a look.
Implement picture display function: layer
1. Here we introduce a layer front-end component
Layer is a web elastic layer component with excellent reputation. It has a comprehensive solution and is committed to serving developers of all levels. Your page will easily have a rich and friendly operating experience.
this site to download.
There are specific usage methods Note a few points here: Before using the layer front-end component, we need to introduce the layer’s js file<script type="text/javascript" src=".../.../layer/layer/layer.js"></script> <script type="text/javascript" src=".../...//layer/layer/extend/layer.ext.js"></script>
Note: The layer.js file should be introduced after jquery, because layer.js is based on jquery.js!
2.json
Json is also required to implement the image display function:
The specific usage is as follows:{ //您服务端接口需严格按照下述格式返回 "status": 1, //请求的状态,1表示成功,其它表示失败 "msg": "", //状态提示语 "title": "", //相册标题 "id": number型, //相册id "start": 0, //初始显示的图片序号,默认0 "data": [ //相册包含的图片,数组格式 { "name": "", //图片名 "pid": number型, //图片id "src": "", //原图地址 "thumb": "", //缩略图地址 "area": [638, 851] //原图宽高 } ] }Use such as:
StringBuilder str = new StringBuilder();The append method is linked as above and must be accurate The final return is like:
return str.toString();The specific usage can also be viewed on the official website I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online! Recommended reading:
Use JS timer to implement the progress bar
Detailed explanation of the use of vue-router
The above is the detailed content of Layer front-end component picture display function. For more information, please follow other related articles on the PHP Chinese website!