马黑黑老师tzMaker在线制作工具试用版
<style>#mum { margin: 20px auto; left: 50%; transform: translateX(-50%); padding: 20px; width: 1200px; font: normal 16px/24px Consolas,'Courier New','Andale Mono',monospace; background: white; box-shadow: 2px 1px 4px gray; position: relative; }
#mum input { padding: 4px 8px; }
#toolBar { display: flex; gap: 10px; width: 100%; height: 40px; }
#toolBar button { min-width: 80px; }
#settingWrap { margin: 10px 0; min-height: 600px; border: 1px solid gray; position: relative; }
#settingWrap div { width: 100%; height: 100%; padding: 20px; position: absolute; }
#settingWrap text, #settingWrap textarea { font-size: 16px; }
#showDiv { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,.99); display: none; padding: 0; overflow: hidden; z-index: 100; margin: 0; }
#showDiv::after { position: absolute; content: '关闭预览'; top: 20px; right: 20px; padding: 0 4px; width: 80px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #efe; border-radius: 6px; background: #eee; color: red; font-size: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.25); cursor: pointer; }
#showDiv iframe { position: relative; width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box; margin: 0; }
#codeTextArea { left: 0; top: 0; bottom: 40px; right: 40px; resize: none; outline: none; box-sizing: border-box; padding: 20px; position: absolute; }
.grow2 { flex-grow: 2; }
.hidden { display: none; }
.appear { display: block; }
.Red { color: red; }
.width500 { width: 500px; }
.width1000 { width: 1000px; }
.height200 { height: 200px; }
.txtMid { padding: 10px 0; text-align: center; }
</style>
<div id="mum">
<div id="toolBar">
<button class="btnItem" title="设置帖子CSS">帖子容器</button>
<button class="btnItem" title="设置MP3">音频</button>
<button class="btnItem" title="设置视频">视频</button>
<button class="btnItem" title="设置播放器">小播</button>
<button class="btnItem" title="设置进度条">进度条</button>
<button class="btnItem" title="设置全屏按钮">全屏</button>
<span class="grow2"></span>
<button class="btnItem" title="生成代码"></></button>
<button id="btnShow" disabled title="预览效果">预览</button>
</div>
<div id="settingWrap">
<!-- 帖子容器 -->
<div class="hidden appear">
<label for="txtOffset">偏 移 量 : </label>
<input id="txtOffset" type="text" value="0px">
<output>数字+px（例如：81px）</output>
<br><br>
<label for="txtBg">背景图片 : </label>
<input id="txtBg" type="text" class="width1000" value=""><br><br>
<label for="txtBgSetting">背景设置 : </label>
<input id="txtBgSetting" type="text" class="width500" value="no-repeat center/cover">
<output>背景图片是否重复、位置、尺寸等</output><br><br>
<label for="txtMaSize">小播尺寸 : </label>
<input id="txtMaSize" type="text" value="12%">
<output>数字+单位（例如：120px | 12%）</output><br><br>
<label>自定义CSS：（可选）</label><br>
<p class="txtMid"><textarea id="txtSelfCss" class="width1000 height200"></textarea></p>
</div>
<!-- 音频 -->
<div class="hidden">
<label for="txtAudio">音频地址 : </label>
<input id="txtAudio" type="text" class="width1000" value=""><br><br>
<output>（请确保音频资源有效）</output>
</div>
<!-- 视频设置 -->
<div class="hidden" id="tzVid">
<label>视频来源 : </label>
<input type="radio" name="radVid" value="pd-vid" checked>
<label>熊猫</label>
<input type="radio" name="radVid" value="qk-vid">
<label>千库</label>
<input type="radio" name="radVid" value="vid">
<label>其它</label><br><br>
<label for="txtVideo">视频地址 : </label>
<input id="txtVideo" type="text" class="width1000" value=""><br><br>
<label>相关CSS : </label>
<input type="text" id="txtVidCSS" class="width500" value="">
<output>（可以设置尺寸、透明度等，例：opacity: 0.5;）</output>
</div>
<!-- 小播 -->
<div class="hidden">
<label>小播元素 : </label>
<input name="radPlayer" type="radio" value="img" checked>
<label>img</label>
<input name="radPlayer" type="radio" value="div">
<label>div</label><br><br>
<label for="aaa">图片地址 : </label>
<input id="txtPlayer" type="text" class="width500" value="">
<output>音频地址</output><br><br>
<label for="txtPlayerPosition">小播位置 : </label>
<input id="txtPlayerPosition" type="text" class="width500" value="left: 45%; bottom: 60px;"><br><br>
<output>（小播位置请使用css语法设置，left、top、right、bottom 纵横方向两两配对或只设置其中一个）</output>
</div>
<!-- 进度条 -->
<div class="hidden">
<label for="txtProg">进度条设置 : </label>
<input id="txtProg" type="text" class="width500" value="left: 42%; bottom: 40px; color: navy;">
<br><br>（位置支持 left、top、right、bottom 纵横方向两两配对或只设置其中一个。可以在此设置前景色和相关内容）
</div>
<!-- 全屏设置 -->
<div class="hidden">
<label for="txtFs">文本颜色 : </label>
<input id="txtFs" type="text" value="#fefefe">
<output>支持多种颜色表达法，例：#eee | gray | rgb(200,100,50)</output><br><br>
<label for="txtFsPosition">按钮位置 : </label>
<input id="txtFsPosition" type="text" class="width500" value="left: 20px; top: 20px;"><br><br>
<output>（按钮位置请使用 left、right、top、bottom 纵横方向两两配套并按格式进行设置 ）</output>
</div>
<div class="hidden">
<textarea id="codeTextArea"></textarea>
</div>
</div>
</div>
<div id="showDiv"></div>
<script>
let currentIdx = 0;
const btns = document.querySelectorAll('#toolBar > .btnItem');
const divs = document.querySelectorAll('#settingWrap > div');
// 初始化元素状态
setElementState([, ]);
// 预览按钮点击事件
btnShow.onclick = () => preView(codeTextArea.value.trim(), showDiv);
// 工具栏按钮事件
btns.forEach((btn, idx) => {
btn.onclick = () => {
currentIdx = idx;
setElementState([, ]);
btnShow.disabled = true;
if (idx === btns.length - 1) {
codeTextArea.value = createHtmlCode();
btnShow.disabled = false;
}
};
});
// 预览
function preView(htmlCode, targetBox) {
if (targetBox.innerHTML) return;
const iframe = document.createElement('iframe');
htmlCode = htmlCode + '\n<style>body {margin: 0; }</style>\n';
iframe.srcdoc = htmlCode;
targetBox.appendChild(iframe);
targetBox.style.display = 'block';
targetBox.onclick = () => {
targetBox.innerHTML = '';
targetBox.style.display = 'none';
}
}
// 元素切换状态
function setElementState(objs) {
objs.forEach((obj, key) => {
const elms = obj;
const className = obj;
elms.forEach((elm, index) => {
if (index === currentIdx) {
elm.classList.add(className);
} else {
elm.classList.remove(className);
}
});
});
}
// 获取帖子容器设置
function getTzSetting() {
const offsetX = txtOffset.value.trim();
const bg = txtBg.value.trim();
const bgSet = txtBgSetting.value.trim();
const maSize = txtMaSize.value.trim();
return `\<style\>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa { --offsetX: ${offsetX}; --bg: url('${bg}') ${bgSet}; --ma-size: ${maSize}; }
\</style\>`;
}
// 整理音频数据
function getMusic() {
return `tz.add('audio', '', '', { src: '${txtAudio.value.trim()}' })`;
}
// 整理视频数据
function getVideo() {
const val = document.querySelector('#tzVid input:checked').value;
let css = txtVidCSS.value.trim();
if (css) css = `.style('${css}')`;
return `tz.add('video', '', '${val}', {src: '${txtVideo.value.trim()}'})${css}`;
}
// 整理小播数据
function getPlayer() {
const radios = document.getElementsByName('radPlayer');
let elm, opt, style;
let pic = txtPlayer.value.trim();
let pos = txtPlayerPosition.value.trim();
if (radios.checked) {
elm = 'img';
opt = `src: '${pic}'`;
style = `.style('${pos}')`;
} else {
elm = 'div';
opt = `style: 'background: url("${pic}") no-repeat center/cover; ${pos}'`;
style = '';
}
return `tz.add('${elm}', '', 'ma', { ${opt} })${style}.playmp3()`;
}
// 整理进度条数据
function getProg() {
return `tz.bgprog().style('${txtProg.value.trim()}')`;
}
// 整理全屏数据
function getFs() {
return `tz.fs().style('${txtFsPosition.value.trim()}')`;
}
// 整合所有数据
function createHtmlCode() {
return `${getTzSetting()}
<div class="pa"></div>
\<script type="module"\>
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
${getMusic()};
${getVideo()};
${getPlayer()};
${getProg()};
${getFs()};
\</script\>`;
}
</script>
<span class="atips_close" onclick="this.parentNode.style.display='none'"></span>
</div>
<font size="5">该工具意在帮助组织代码能力较弱的朋友使用 tzMaker 模块快速制作 html 音画帖。感兴趣的朋友也可以前往使用：</font><br />
<br />
<font size="4"> <a href="http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=mahei_1768366606" target="_blank">tzMaker在线制作工具</a></font><br />
<br />
<font size="5">工具暂时提供一些简单的功能，随后还会加入 LRC 模块，但高级应用模块的加入非常麻烦，不打算实现。工具的下载将在 LRC 模块做好后放在网盘。<br />
<br />
工具的使用应该很简单：在相应的模块填写相应的内容，而后点击工具条右边的 </> 按钮生成代码，再点击预览按钮查看效果，不合适的再回到相应模块进行修改→生成代码→预览，直到满意为止。<br />
<br />
提示：工具没有对用户数据进行差错验证，请确保自己填写的数据是合乎要求的。</font><br />
</td></tr></table> 广大音画制作者的福音，谢谢马老师推出tzMaker在线制作工具，谢谢醉美管理员精彩分享 支持分享，内容别出心裁 分享超给力，点赞赞赞赞 支持佳作，期待佳作频出 赞，顶帖内容精彩无限 前来支持~~~~~~~~~~~~~~~~~~~ 感谢分享，生活更加多彩
页:
[1]
2