`

flexpaper遮住div解决方法

 
阅读更多
近期在做flexpaper展示的时候,碰到了遮住div层的问题,现已解决将解决方法分享下。

   flexpaper属于flash,而flash默认位于页面的最顶层,这样就会将其它div层遮住,而设置z-index及垂直屏幕的坐标没有任何效果。

   解决方法:

         在flexpaper_flash.js和flexpaper_flash_debug.js这两个文件的<object></object>标签中加入<param name="wmode" value="transparent"> 这行代码。

var vars = "";  
     
   if (conf) {  
    for (var k in conf) {   
     if (conf[k]) {  
      var val = conf[k];   
      vars += k +'='+ (/function|object/.test(typeof val) ? f.asString(val) : val) + '&';  
     }  
    }  
    vars = vars.slice(0, -1);  
    html += '<param name="flashvars" value=\'' + vars + '\' />';  
   }  
     
   html += '<param name="wmode" value="transparent">';  
     
 


wmode属性有三种模式:window、opaque、transparent。

(1)window 模式
     默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只 是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。

(2)Opaque 模式
     这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

(3)Transparent 模式
     透明模式,在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

    网上有些资料说其它浏览器(firefox opera etc.) 使用 <embed wmode="transparent" />在embed节点中加入wmode值。我这边没有出现这样的情况,就没有加入embed这个标签。

令:我在显示flexpaper时遇到了firefox无法显示,而其它浏览器均可显示的情况,经过研究发现是没有加入ZoomTransition : 'easeOut'这个参数,加上即可。

  现总结flexpaper常用参数如下:

SwfFile (String) 需要使用Flexpaper打开的文档
Scale (Number) 初始化缩放比例,参数值应该是大于零的整数
ZoomTransition (String) Flexpaper中缩放样式,它使用和Tweener一样的样式,默认参数值为easeOut.其他可选值包括: easenone, easeout, linear, easeoutquad
ZoomTime (Number) 从一个缩放比例变为另外一个缩放比例需要花费的时间,该参数值应该为0或更大。
ZoomInterval (Number) 缩放比例之间间隔,默认值为0.1,该值为正数。
FitPageOnLoad (Boolean) 初始化得时候自适应页面,与使用工具栏上的适应页面按钮同样的效果。
FitWidthOnLoad (Boolean) 初始化的时候自适应页面宽度,与工具栏上的适应宽度按钮同样的效果。
localeChain (String) 设置地区(语言),目前支持以下语言。

en_US (English)
fr_FR (French)
zh_CN (Chinese, Simple)
es_ES (Spanish)
pt_BR (Brazilian Portugese)
ru_RU (Russian)
fi_FN (Finnish)
de_DE (German)
nl_NL (Netherlands)
tr_TR (Turkish)
se_SE (Swedish)
pt_PT (Portugese)
el_EL (Greek)
da_DN (Danish)
cz_CS (Czech)
it_IT (Italian)
pl_PL (Polish)
pv_FN (Finnish)
hu_HU (Hungarian)
FullScreenAsMaxWindow (Boolean) 当设置为true的时候,单击全屏按钮会打开一个flexpaper最大化的新窗口而不是全屏,当由于flash播放器因为安全而禁止全屏,而使用flexpaper作为独立的flash播放器的时候设置为true是个优先选择。
ProgressiveLoading (Boolean) 当设置为true的时候,展示文档时不会加载完整个文档,而是逐步加载,但是需要将文档转化为9以上的flash版本(使用pdf2swf的时候使用-T 9 标签)。
MaxZoomSize (Number) 设置最大的缩放比例。
MinZoomSize (Number) 最小的缩放比例。
SearchMatchAll (Boolean) 设置为true的时候,单击搜索所有符合条件的地方高亮显示。
InitViewMode (String) 设置启动模式如"Portrait" or "TwoPage".
ViewModeToolsVisible (Boolean) 工具栏上是否显示样式选择框。
ZoomToolsVisible (Boolean) 工具栏上是否显示缩放工具。
NavToolsVisible (Boolean) 工具栏上是否显示导航工具。
CursorToolsVisible (Boolean) 工具栏上是否显示光标工具。
SearchToolsVisible (Boolean)
工具栏上是否显示搜索。
分享到:
评论

相关推荐

    解决使用flexpaper时兼容性问题

    本解答将详细介绍如何解决FlexPaper的兼容性问题以及`flexpaper_repair.js`在这个过程中的作用。 1. **理解FlexPaper的工作原理**: FlexPaper通过将文档转换为图片序列或HTML5 Canvas来实现跨浏览器的兼容性。它...

    FlexPaper解决滚动条问题

    解决方法是确保FlexPaper的JavaScript代码与其他库正确隔离,使用命名空间或jQuery的`noConflict()`方法避免冲突。 2. **CSS样式覆盖**:有时,网站的全局CSS样式可能会影响到FlexPaper的滚动条,导致其显示或行为...

    flexpaper2.0.6.SWC

    FlexPaper 是一款强大的在线文档查看和转换工具,主要用于在网页上展示PDF、图像和其他文档格式。2.0.6 版本的 SWC 文件是 FlexPaper 的一个组件,它是Adobe Flex开发中的一个库,用于集成到Flash应用程序或Flex项目...

    FlexPaper_1.5.1_flash

    FlexPaper 的出现,正是为了解决这些问题,通过将PDF转换为SWF,可以实现轻量级的在线阅读体验,同时保持文档原有的布局和质量。 SWF是一种由Adobe Flash支持的多媒体文件格式,常用于在网络上传输动态内容,如动画...

    flexpaper2.2.7去水印版

    总的来说,“flexpaper2.2.7去水印版”是一个定制化的在线文档查看解决方案,它结合了FlexPaper的强大功能和个性化的优化,旨在提供一个更加纯净、高效的文档浏览体验。对于那些需要展示大量无水印文档的网站或应用...

    flex项目 FlexPaper 2.1.2

    FlexPaper 2.1.2 是一款基于Adobe Flex技术的数字出版解决方案,它允许开发者将PDF或SWF文档转换为互动式的在线阅读体验。这款工具提供了丰富的功能,如自定义Logo、书签、打印、搜索、缩略图以及通过JavaScript进行...

    flexpaper使用

    &lt;div id="flexpaper_container"&gt;&lt;/div&gt; ``` 3. **初始化FlexPaper**:使用JavaScript编写代码来初始化FlexPaper,传入必要的配置参数。这些参数包括SWF文件的位置、PDF文件的URL、文档的宽度和高度等。 ```...

    flexPaper包+使用指南

    总的来说,FlexPaper是一个强大而实用的工具,对于需要在Web应用中嵌入PDF阅读功能的开发者来说,它提供了一个高效且灵活的解决方案。通过熟练掌握和应用FlexPaper,开发者可以轻松地构建出功能丰富的在线PDF阅读器...

    FlexPaper代码

    FlexPaper 是一款强大的在线文档查看和翻页工具,主要用于将PDF、图像和其他文档格式转换为交互式的Web体验。它提供了一种优雅的...对于想要提升在线文档展示效果的网站或应用,FlexPaper是一个值得考虑的解决方案。

    flexpaper在线文档显示

    FlexPaper 是一款强大的在线文档查看和转换解决方案,它允许用户在网页上以类似原生的体验查看PDF、DJVU、图像和其他格式的文档。它采用先进的技术,提供流畅的用户体验,同时支持多种平台和浏览器。 标题...

    flexpaper打印以及去除打印

    FlexPaper是一款功能强大的...无论是为了方便用户快速打印文档,还是为了保护内容的隐私和安全,FlexPaper都能提供相应的解决方案。理解并掌握如何操作和配置这些功能,对于使用和开发基于FlexPaper的应用至关重要。

    flexPaper方式实现文档预览功能

    FlexPaper是一种流行的在线文档预览解决方案,它允许用户在网页上查看PDF、图像和其他文档格式,无需离开浏览器或安装额外的软件。这个技术基于Flash和HTML5,为用户提供了一种跨平台、高性能的文档查看体验。在本篇...

    FlexPaper_2.1.0官方版本

    FlexPaper 是一个强大的开源项目,专注于为Web应用提供轻量级的SWF文档查看解决方案。在浏览器环境中,它能够高效地展示PDF、DJVU、TIF和其他多种格式的文档,带给用户类似纸质阅读的体验。这个2.1.0版本是FlexPaper...

    flexpaper_1.2.4_swc

    FlexPaper 是一款强大的在线文档查看和转换工具,主要用于在Web环境中展示PDF、DOC等文档。在本次提及的版本"flexpaper_1.2.4_swc"中,主要亮点是用户可以禁用打印按钮的功能,这为那些不希望提供打印选项的Web应用...

    flexpaper 带翻页间隔

    综上所述,FlexPaper 提供了一个全面的解决方案,将静态文档转化为互动的、有翻页间隔的在线阅读体验,同时兼顾了功能性、美观性和用户体验。无论是个人还是企业,都可以利用FlexPaper来提升在线文档的呈现质量和...

    FlexPaper源码

    FlexPaper是一款流行的在线文档查看和转换工具,常用于在网页上展示PDF、图像和其他文档格式。源码的提供意味着我们可以深入了解其内部工作机制,并且可以根据需求进行定制化开发,例如去除Logo功能,这在某些版权或...

    FlexPaper_2.2.4php在线浏览WORD文档

    FlexPaper 是一款强大的在线文档查看和转换工具,尤其适合用于在网页上展示PDF和DOC等格式的文档。这款软件的核心功能是将静态的文档转换为交互式的、可以在Web浏览器中流畅阅读的版本,极大地提升了用户体验。标题...

Global site tag (gtag.js) - Google Analytics