专栏首页游戏杂谈flash在网页应用中的一些特殊应用场景

flash在网页应用中的一些特殊应用场景

一般flash在网页显示出来就可以了,不用说与JavaScript之间交互的问题,但有时应用又较为特殊(须兼容各主流浏览器):

1、网页中屏蔽flash的右键

2、点击flash广告打开新窗口

3、在不透明的情况下,要在flash之上弹出浮动层(设置flash为透明很容易解决掉这个问题)

这里其实分了三类:

1、设置flash的参数wmode为transparent可以解决问题的

2、使用DOM绝对定位覆盖flash可以解决问题的

3、使用其它技巧来解决问题的

前两种其实没什么太多可讲的,因为网上已经有太多的例子

屏蔽flash的右键 (缺点:就是必须要将flash设置为透明,不设置为透明如何实现暂时没找到方案)

可以参考这里《轻松去掉web中flash右键菜单》,在线Demo的例子

很多时候网页中的flash应用都是用作广告,可广告也有问题,如果点击时调用JS,使用window.open可能会被浏览器拦截掉,达不到预期的效果,针对这一类的应用,解决方案就是让a元素把flash盖住,用户其实点击的是a元素(加上属性target=”_blank”)

-----------这类应用,不一定非得要求将flash设置为透明

腾讯首页为例:

这时是一块小广告,其实它是flash,只不过被A元素给“盖”住了。

主容器为relative(相对定位),flash的object元素正常插入即可,后面的A元素设置为absolute(绝对定位),然后给A元素设置链接和一些其它属性就达到要求了,应该来说很简单。

不过实现这种需求有两种方法:

1、给a设置一个background-image(1px*1px且透明的gif即可),然后平铺

2、设置background-color,然后使用opactity(透明度)

腾讯首页使用的是方法二,省了一张图片

重点来说说第三种应用场景:不能设置flash为透明,要实现弹出浮动层的效果。

1、为什么不能设置flash为透明

2、不设置flash为透明,直接弹出浮动层遇到了什么问题

3、如何解决遇到的问题

a、flash不能设置为透明的原因,据我以前接触过的应用来讲,一款使用flex开发的webgame,如果将其网页中的参数设置为透明(wmode=transparent)会产生一些莫名其妙的bug,最终的方案是必须放弃设置透明

b、遇到的问题就是弹出的浮动,很容易被flash给“吃掉”,但改变页面大小或是做一些其它操作时,它又会被“吐出来”

c、其它浏览器下使用iframe倒是可以解决问题,郁闷的就是IE这一系列如何解决,而且玩游戏的玩家,根据第三方统计工具来看占有超过80%的访问量

后来玩意看到一个应用,它就实现上述的效果,没有将flash设置为透明,但在IE下拖动浮动层还很流畅,后来从里面找到了方案

window.ActiveXObject && addEvent(document, "focusout", function () {
    document.body.style.zoom = 0;
    document.body.style.zoom = 1;
});

没错,就是这三行代码就解决了上述的问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>swf测试</title> <style type='text/css'> * {margin:0; padding:0;} body {width:100%; height:100%; overflow:hidden; color:#fff;} .dialog {border:1px solid #60b0f3; background-color:#8bd3ff;} </style> </head> <body> <div style="margin:20px; position:relative; z-index:-1;"> <div id="mainGame"></div> </div> <div class="dialog" style="width:300px; height:190px; position:absolute; top:200px; left:160px; z-index:9999999;" id="dialog2"> <div> <div style="height:32px; line-height:32px; padding-left:20px;"><h3>浮动框</h3></div> <div style="margin:5px 10px; background-color:#fff;"> <div style="width:100%; height:140px;">asdf</div> </div> </div> <iframe style="z-index:-1; position:absolute; filter:alpha(opacity=0); opacity:0; border:none; left:-1px; top:-1px; width:100%; height:100%;" src="javascript:;" frameBorder="0"> </iframe> </div> </body> </html> 预览代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一道二栏布局题目

    <div id="wrapper">     <div>C</div>     <div>A</div>     <div>B</d...

    meteoric
  • 仿Google+相册的动画

    鼠标移入、移出时均有动画效果,咋一看估计是使用了css3的transform属性来实现动画效果的。

    meteoric
  • HTML5的Histroy API

    比较典型的是GitHub,在点击代码文件夹和文件时,会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了(跟新开了一个新页面感觉一样),但体验起来很...

    meteoric
  • 几种常见的CSS布局

    其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法

    Nealyang
  • 几种常见的 CSS 布局

    其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法

    夜尽天明
  • 负margin的原理以及应用

      负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧。   虽说网络上关于负margin的实践有很多,但对margin负值为什么会...

    欲休
  • 水平/垂直都居中的div

    用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div...

    菩提树下的杨过
  • CSS布局 -- 左右定宽,中间自适应

    左右设置绝对定位,定宽,中间设置margin-left  margin-right

    书童小二
  • CSS 3D世界,3D 透视照片墙

    有了前面2章内容,大家应该对CSS 3D的构建,都有了一定认知了,动手能力强的小伙伴可能已经开始自己做好看的效果了。

    Javanx
  • 从零开始学 Web 之 CSS3(六)动画animation,Web字体

    好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。

    Daotin

扫码关注云+社区

领取腾讯云代金券