笔者最近在酝酿一个小系统，一个功能就是要将设备手册显示悬浮显示在网页中。点击一下按钮出来了，可以实现在手机端方便查看。但是又不能将手册直接至于html文件中，因为文件文字过于繁多，不利于修改与管理。
辗转反侧找到一个jquery插件VenoBox，十分方便就解决笔者的问题。
1、当然和其他js插件一样需要应用js和css文件。
<link href="venobox/venobox.css" rel="stylesheet">
<script src="venobox/jquery.min.js"></script>
<script src="venobox/venobox.min.js"></script>
2、在html文件中，在iframe内插入网页,加入data-type属性。
<a href="QSMS/UPS/UPS设备应知应会.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox details-link" title="Portfolio Details">应知应会</a>
3、JS中启用venobox，还有很多参数可以设置，这可以到veno它的官网查看https://veno.es/venobox/。
$(document).ready(function(){
$('.venobox').venobox();
});
4、最后很重要的一步，就是怎么把word转为网页显示呢。
利用word文档的功能。文件-另存为-网页html/html，将生成的网页以及它的文件夹放在第2部的www目录中。
5、点击浏览发现乱码，chrome浏览器和手机浏览器都乱码，edge浏览器正常。乱码源于编码问题，到处找寻一番，设置文档的编码后解决！
设置office web选项的编码为utf-8，原格式是GB2312-80。点击文件->选项->高级找到web选项：
6、完美解决，看看手机上效果，还可以左右翻选择其他文档呢。
网友评论