15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 如何将大量gif制作成html作为预览文件?

如何将大量gif制作成html作为预览文件?

时间:2024-01-15 23:00:02 | 来源:网站运营

时间:2024-01-15 23:00:02 来源:网站运营

如何将大量gif制作成html作为预览文件?:不知道你说的大量有多少。

如果你只有几百上千个,建议你用Adobe Dreamweaver,新建网页,批量倒入图片,保存。另外软件也支持一些自动化的功能,图形化界面很好操作。

如果百八十个图,复制我的代码,保存为view.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都可以。

关键词:文件,作成

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭