您的位置: 首页 >日志>动易系统>详细内容

动易系统

如何换掉旧系统中的Flash标签

来源:本站原创 发布时间:2021-10-11 10:04:20 浏览次数: 【字体:

随着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: 4000autoPlay: 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: 4000autoPlay: 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插件输出到网上。



×

用户登录