时间:2024-01-15 23:00:02 | 来源:网站运营
时间:2024-01-15 23:00:02 来源:网站运营
如何将大量gif制作成html作为预览文件?:不知道你说的大量有多少。<html> <head> <meta charSet="utf-8" /> <title>AE文件预览</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> <!-- by 大远 2020.11.24--> <script type="text/javascript"> /** * 请修改这里的代码,书写你的资源标题和地址, * 更多资源请复制大括号内的内容并修改 * 资源地址和页面一般是放在同一个主目录,图片一般放子目录,如imgs, * 图片建议使用相对地址,如 imgs/1.gif * 如果您不熟悉代码,其它地方请勿修改!!! **/ let json = [{ title: "资源标题1", url: "imgs/1.gif" }, { title: "资源标题2", url: "imgs/2.gif" }, { title: "资源标题3", url: "imgs/3.gif" }, ]; </script> <style type="text/css"> * { box-sizing: border-box; } body { background: #DDDDDD; margin: 0; padding: 0; } .list-group { display: flex; flex-flow: row wrap; } .list-group-item { width: 25%; flex-grow: 1; padding: 10px; } .list-group-item img { width: 100%; } .list-group-item p { text-align: center; } </style> </head> <body> <div class="list-group" id="plist"> </div> <script id="tpl" type="text/template"> <div class="list-group-item"> <a href="{{url}}" target="_blank"><img src="{{url}}" /></a> <p>{{title}}</p> </div> </script> </body> <script type="text/javascript"> let plist = document.getElementById('plist'); renderHtml(json, plist); function renderHtml(json, tplContent) { let tpl = document.getElementById("tpl"); let html = ""; //声明初始化html string for (let i = 0; i < json.length; i++) { html += html2tpl(json[i], tpl); //每次循环拼接数据 } tplContent.innerHTML = html; //赋值 //逐个替换成模板数据 function html2tpl(json) { let newHTML = tpl.innerHTML.toString(); for (key in json) { var re = new RegExp("{{" + key + "}}", "g"); newHTML = newHTML.replace(re, json[key]); } return newHTML; } } </script></html>
如果是上万个,并且要做分页查看等功能,最好写个程序跑。用Node,PHP,python本地跑脚本生成静态HTML都可以。关键词:文件,作成