如何换掉旧系统中的Flash标签
随着Flash逐步淘汰,很多浏览器不支持,以前那个年代大量使用Flash的标签的旧系统都需要转换过来,否则无法显示。包含了文章、图片、视频、文档、公告等模型。其中涉及到SF系统中一些最常用的 通用焦点图-流行式,广告版位标签,图集内容页,电子文档内容页等含lfash标签模板,还有页面个性化制作的flash效果。那么就如何去flash化,接下来就逐一拆解分析。
1、焦点图流行式、flash广告版位
按理可套用新标签+superslide.js库来简单解决。
文章焦点图标签↓↓↓↓↓↓↓
<div class="focusPic">
{PE.Label id="通用信息列表" bindStyle="焦点图" titleLength="50" outputQty="5" nodes="@RequestInt_Id" listOrderType="3" optionalExtend="num" imageWidth="250" imageHeight="210" picExist="true"/}
</div><script>jQuery(".focusPic").slide({ titCell: ".hd li", mainCell: ".bd ul", effect: "fold", interTime: 4000, autoPlay: true });</script>
广告焦点图标签↓↓↓↓↓↓↓
<div class="mainad">
{PE.Label id="焦点图切换-广告" advZoneId="2" imageWidth="724" imageHeight="100" outputQty="5" titleLength="0" contentLength="0" /}
</div>
<script>jQuery(".mainad").slide({ titCell: ".hd li", mainCell: ".bd ul", effect: "fold", interTime: 4000, autoPlay: true });</script>
如果需要实现以前类似ppt的随机百叶窗效果没了,怎么办?
可以用 JQ插件 nivoSlider 代替,这里需要注意nivoSlider版本,只有3.2版的nivoSlider才适用于咱们系统自带的JQ3.0的库。
教程:https://www.cnblogs.com/chenguiya/p/4039192.html
github:https://github.com/Codeinwp/Nivo-Slider-jQuery
2、图集内容页
SF系统里的“全屏观看”采用flash展示,这里建议在效果图设计中直接去掉,也可使用其它替代,因相册特效效果甚多不一一列具
而默认的SF图集内容页和SA系统里同样,“全屏查看”也是采用flash展示,这里建议改为“查看大图”
3、电子文档内容页
旧系统中的电子文档模块,原使用方法是把文档转换成swf格式打开,禁用flash后这种模式现在行不通了
最佳的解决办法要是直接在源代码中做转换,转换为html5或pdf,要么购买第三方在线转换服务。
如果不作定制处理,可以考虑以下方法
1.PDFObject.js、pdf.js ,media.js 实现pdf预览功能,但是对word等类型的文件无能为力(让客户把word文件发布成pdf再上传)。
http://sd.powereasy.net:11174/Item/127191.aspx
2.通过页面内嵌iframe,可支持图片、pdf、txt、但需要浏览器自身支持。
3.word可通过第三方的方式转换
http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx
4.通过后缀名判断,浏览器版本判断,解决各兼容问题
4、FlashBanner
1.如果只是简单的淡出淡入图片/文字切换,jq+css3轻松解决。
2.如果是文字变飞那种。swish中把文字动画导出gif,但这样一来这个图片就会很大。
3.如果这个Flash尺寸比较小可以直接在flash中导出gif图,或转换为视频导mp4。
4.如果是比较复杂的,还可以制作成AE,利用bodymovin插件输出到网上。
用户登录
还没有账号?
立即注册