出处:http://blog.csdn.net/amino77/article/details/17994203
近期在做flexpaper展示的时候,碰到了遮住div层的问题,现已解决将解决方法分享下。
flexpaper属于flash,而flash默认位于页面的最顶层,这样就会将其它div层遮住,而设置z-index及垂直屏幕的坐标没有任何效果。
解决方法:
在flexpaper_flash.js和flexpaper_flash_debug.js这两个文件的<object></object>标签中加入<param name="wmode" value="transparent"> 这行代码。
/******* FLASHVARS *******/
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="\''">';
}
html += '<param name="wmode" value="transparent">';
html += "";
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>在embed节点中加入wmode值。我这边没有出现这样的情况,就没有加入embed这个标签。
令:我在显示flexpaper时遇到了firefox无法显示,而其它浏览器均可显示的情况,经过研究发现是没有加入**ZoomTransition : 'easeOut'**这个参数,加上即可。
分享到:
相关推荐
本解答将详细介绍如何解决FlexPaper的兼容性问题以及`flexpaper_repair.js`在这个过程中的作用。 1. **理解FlexPaper的工作原理**: FlexPaper通过将文档转换为图片序列或HTML5 Canvas来实现跨浏览器的兼容性。它...
解决方法是确保FlexPaper的JavaScript代码与其他库正确隔离,使用命名空间或jQuery的`noConflict()`方法避免冲突。 2. **CSS样式覆盖**:有时,网站的全局CSS样式可能会影响到FlexPaper的滚动条,导致其显示或行为...
FlexPaper 是一款强大的在线文档查看和转换工具,主要用于在网页上展示PDF、图像和其他文档格式。2.0.6 版本的 SWC 文件是 FlexPaper 的一个组件,它是Adobe Flex开发中的一个库,用于集成到Flash应用程序或Flex项目...
FlexPaper 的出现,正是为了解决这些问题,通过将PDF转换为SWF,可以实现轻量级的在线阅读体验,同时保持文档原有的布局和质量。 SWF是一种由Adobe Flash支持的多媒体文件格式,常用于在网络上传输动态内容,如动画...
总的来说,“flexpaper2.2.7去水印版”是一个定制化的在线文档查看解决方案,它结合了FlexPaper的强大功能和个性化的优化,旨在提供一个更加纯净、高效的文档浏览体验。对于那些需要展示大量无水印文档的网站或应用...
FlexPaper 2.1.2 是一款基于Adobe Flex技术的数字出版解决方案,它允许开发者将PDF或SWF文档转换为互动式的在线阅读体验。这款工具提供了丰富的功能,如自定义Logo、书签、打印、搜索、缩略图以及通过JavaScript进行...
<div id="flexpaper_container"></div> ``` 3. **初始化FlexPaper**:使用JavaScript编写代码来初始化FlexPaper,传入必要的配置参数。这些参数包括SWF文件的位置、PDF文件的URL、文档的宽度和高度等。 ```...
总的来说,FlexPaper是一个强大而实用的工具,对于需要在Web应用中嵌入PDF阅读功能的开发者来说,它提供了一个高效且灵活的解决方案。通过熟练掌握和应用FlexPaper,开发者可以轻松地构建出功能丰富的在线PDF阅读器...
FlexPaper 是一款强大的在线文档查看和翻页工具,主要用于将PDF、图像和其他文档格式转换为交互式的Web体验。它提供了一种优雅的...对于想要提升在线文档展示效果的网站或应用,FlexPaper是一个值得考虑的解决方案。
FlexPaper是一款功能强大的...无论是为了方便用户快速打印文档,还是为了保护内容的隐私和安全,FlexPaper都能提供相应的解决方案。理解并掌握如何操作和配置这些功能,对于使用和开发基于FlexPaper的应用至关重要。
FlexPaper 是一款强大的在线文档查看和转换解决方案,它允许用户在网页上以类似原生的体验查看PDF、DJVU、图像和其他格式的文档。它采用先进的技术,提供流畅的用户体验,同时支持多种平台和浏览器。 标题...
FlexPaper是一种流行的在线文档预览解决方案,它允许用户在网页上查看PDF、图像和其他文档格式,无需离开浏览器或安装额外的软件。这个技术基于Flash和HTML5,为用户提供了一种跨平台、高性能的文档查看体验。在本篇...
FlexPaper 是一个强大的开源项目,专注于为Web应用提供轻量级的SWF文档查看解决方案。在浏览器环境中,它能够高效地展示PDF、DJVU、TIF和其他多种格式的文档,带给用户类似纸质阅读的体验。这个2.1.0版本是FlexPaper...
FlexPaper 是一款强大的在线文档查看和转换工具,主要用于在Web环境中展示PDF、DOC等文档。在本次提及的版本"flexpaper_1.2.4_swc"中,主要亮点是用户可以禁用打印按钮的功能,这为那些不希望提供打印选项的Web应用...
综上所述,FlexPaper 提供了一个全面的解决方案,将静态文档转化为互动的、有翻页间隔的在线阅读体验,同时兼顾了功能性、美观性和用户体验。无论是个人还是企业,都可以利用FlexPaper来提升在线文档的呈现质量和...
FlexPaper是一款流行的在线文档查看和转换工具,常用于在网页上展示PDF、图像和其他文档格式。源码的提供意味着我们可以深入了解其内部工作机制,并且可以根据需求进行定制化开发,例如去除Logo功能,这在某些版权或...
FlexPaper 是一款强大的在线文档查看和转换工具,尤其适合用于在网页上展示PDF和DOC等格式的文档。这款软件的核心功能是将静态的文档转换为交互式的、可以在Web浏览器中流畅阅读的版本,极大地提升了用户体验。标题...
### Flexpaper二次开发入门教程概览 Flexpaper是一款由新西兰Devaldi公司开发的开源组件,主要用于在线浏览和展示各种类型的文档,如DOC、PPT、PDF等,无需额外的软件环境支持。Flexpaper遵循GPL开源协议,允许用户...