時間：2024-01-15 23:00:02 | 來源：網(wǎng)站運營
時間：2024-01-15 23:00:02 來源：網(wǎng)站運營
如何將大量gif制作成html作為預(yù)覽文件？：不知道你說的大量有多少。
在線咨詢
<html> <head> <meta charSet="utf-8" /> <title>AE文件預(yù)覽</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> <!-- by 大遠 2020.11.24--> <script type="text/javascript"> /** * 請修改這里的代碼，書寫你的資源標題和地址, * 更多資源請復(fù)制大括號內(nèi)的內(nèi)容并修改 * 資源地址和頁面一般是放在同一個主目錄，圖片一般放子目錄，如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); //每次循環(huán)拼接數(shù)據(jù) } tplContent.innerHTML = html; //賦值 //逐個替換成模板數(shù)據(jù) 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本地跑腳本生成靜態(tài)HTML都可以。關(guān)鍵詞：文件,作成
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
