`
KB章鱼
  • 浏览: 26796 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

html与嵌入其中的flash均存在滚动条的情况处理

阅读更多

我们在做开发时经常会遇到这种情况:

    a.swf被添加到网页中, a.swf和html页面同时存在滚动条, 项目经理提了一个BT的需求---处理a.swf鼠标滚动的时候html页面不执行滚动, 反之则执行html页面的滚动!

 

应该怎么做呢?

方法1:

1.鼠标移入a.swf滚动区域的时候: 告知JS移除浏览器鼠标滚动监听.

2.鼠标移出a.swf滚动区域的时候: 告知JS添加浏览器鼠标滚动监听.

3.a.swf的wmode设置为"window".

总结: wmode设置为"window"可能会不满足项目需求, 这使得a.swf遮挡住任何在其之下的html页面; 另外鼠标移入a.swf滚动区域后按Alt+Tab切换页面时没有告知JS添加浏览器鼠标滚动监听, 所以在操作之后切回到html页面中是没有滚动处理的

 

方法2:

1.a.swf取消自身的鼠标滚动监听事件, 添加滚动处理接口供JS调用, 例如wheelToFlash(value).

 

2.鼠标移入a.swf滚动区域的时候: 告知JS, 例如mouseIsInFlashWheelRange=true.

3.鼠标移出a.swf滚动区域的时候: 告知JS, 例如mouseIsInFlashWheelRange=false;

4.JS监听鼠标滚动事件, 在事件监听处理函数中我们需要做如下判断

 

if(mouseIsInFlashWheelRange==true)
{
    /**调用a.swf提供的接口使a.swf模拟滚动*/
    /**"flash"是html嵌入的a.swf的ID, value为html滚表滚动的值*/
    document.getElementById("flashID").wheelToFlash(value);

    /**阻止html页面鼠标事件的冒泡, 通常是event.preventDefault()*/
    event.preventDefault();
}
else
{
    /**处理html正常的滚动, 我们可以什么都不需要做*/
}

 总结: 与方法1相比没有了wmode="window"的限制; Alt+Tab的问题仍然存在。

 

注意: 在写JS代码的时候我们需要注意兼容性的问题, 不同浏览器对鼠标事件的监听以及滚动值的获取均不相同!

 

 

0
0
分享到:
评论

相关推荐

    html与嵌入其中的flash均存在滚动条的情况分析及处理方法

    a.swf被添加到网页中, a.swf和html页面同时存在滚动条, 项目经理提了一个BT的需求---处理a.swf鼠标滚动的时候html页面不执行滚动, 反之则执行html页面的滚动,遇到此问题的朋友可以参考下啊,希望本文对你有所帮助

    显示滚动条的Flash图文列表.rar

    你需要关联滚动条与内容区域,使得滚动条的动作能反映内容的滚动。例如,你可以设置滚动条的最小值、最大值、当前值等属性,确保它们与内容的长度同步。 5. **编写动态加载内容**:为了模拟加载过程,你需要编写...

    滚动条图片展示效果,很酷的

    `flashObject.js` 是一个JavaScript文件,用于在HTML页面中嵌入Flash内容。在HTML5逐渐取代Flash的时代,这个脚本可能包含了一段代码,使得旧版的浏览器能够识别并播放`b07_slideBanner.swf` 文件。Flash Object库是...

    flash滚动图片导航

    "Flash滚动图片导航"就是一种利用Flash实现的创新性网页导航方式,它以动态滚动的图片来展示网站的各个部分或功能,既美观又实用。这种效果能够吸引用户的注意力,提升用户体验,使得用户更加愿意探索网站的各个页面...

    Flash+XML滚动新闻代码

    2. 设计Flash界面:在Flash中设计新闻滚动的界面,包括文字区域、滚动条等元素。 3. 编写ActionScript:使用AS3(ActionScript 3)解析XML文件,获取新闻数据,并将其绑定到舞台上的相应元素。 4. 控制滚动效果:...

    动画滚动条

    标题中的“动画滚动条”可能是指在网页或应用程序中用于显示内容滚动的视觉效果,而“Flash动画广告”则指的是使用Adobe Flash软件创作的动态广告,这种广告形式在过去网络技术还不发达时非常流行,因为Flash能够...

    flash图片滚动效果

    通过HTML嵌入SWF文件,结合XML配置图片信息,以及ActionScript处理交互逻辑,实现了这一效果。随着HTML5和其他现代Web技术的发展,Flash已经逐渐被淘汰,但其在早期互联网中的应用和创新依然值得我们回顾和学习。

    在网页中实现flash滚动

    1. Flash组件:Flash滚动效果通常依赖于ActionScript,这是Flash中的编程语言,用于控制动画和交互行为。你需要对ActionScript有一定的了解,以便编写自定义脚本来实现滚动效果。 2. HTML与Flash整合:Flash内容通常...

    flash 动态导航条代码

    - **测试与发布**:预览动画以检查效果,然后导出为SWF格式,以便在网页中嵌入。 5. **自定义修改**: 用户可以通过以下方式自定义Flash动态导航条: - **更改视觉样式**:调整按钮的颜色、形状、大小和位置,以...

    Flash抽奖程序源代码

    6. **发布与集成**:完成的Flash抽奖程序需要导出为SWF格式,并嵌入到HTML页面中,或者与服务器端脚本(如PHP、ASP.NET)结合,以实现网络交互。 在提供的压缩包中,`Readme-说明.htm`和`软件说明.txt`通常包含关于...

    带后台的flash滚动图片.txt

    从给定的文件信息来看,我们探讨的知识点主要包括:Flash滚动图片实现技术、ASP脚本在Web开发中的应用以及变量与对象的使用。 ### Flash滚动图片实现技术 Flash滚动图片是一种网页设计技术,用于在网站上展示动态...

    php+flash留言本源码

    Flash则为这个留言本增添了丰富的用户界面元素,如动态显示留言、滚动条、输入框等。Flash的ActionScript语言允许开发者编写交互式脚本,使用户可以通过鼠标点击或键盘输入与留言本进行互动。Flash的图形渲染能力也...

    FLASH网页设计模板

    2. **动作脚本(ActionScript)**:Flash支持ActionScript编程语言,通过编写脚本,设计师可以让网页元素响应用户交互,如点击按钮、滚动条滑动等。ActionScript 3.0是Flash中的一个强大版本,具有面向对象的特性,...

    股票线图flash小例子股票线图flash小例子

    "amstock.html"可能是包含Flash对象的HTML文件,通过JavaScript与Flash通信,实现更高级的功能。 8. **文档资源**:压缩包中的"changelog.txt"记录了版本更新的历史;"licence.txt"包含了软件的许可协议信息;...

    flash与asp的结合应用实例之一 论坛的实现(上

    1. **用户界面设计**:使用Flash创建论坛的界面,可以实现动态按钮、滚动条、动画指示器等,提高用户体验。 2. **ActionScript编程**:Flash中的ActionScript是基于ECMAScript的脚本语言,用于控制动画和实现交互。...

    浮动广告条 插入flash

    浮动广告条是网页设计中常见的一种营销手段,它通常出现在网页的边缘,跟随用户滚动页面而保持在屏幕的固定位置,以吸引用户的注意力。Flash是一种早期广泛用于创建动态和交互式内容的技术,包括动画、游戏和广告等...

    60个透明FLASH

    透明Flash特效可以是各种类型的动画,如按钮、导航栏、滚动条、过渡效果、广告横幅等,它们在不影响网页其他内容的情况下,增加网站的互动性和专业感。 标签“60个透明FLASH”和“网页特效”是关键词,帮助用户快速...

    flash班级网站 swf UI 作业 flash班级网站 swf UI 作业

    【标题】"Flash班级网站swf UI作业"指的是一个基于Adobe Flash技术构建的班级网站项目,其中包含了用户界面(UI)的设计与实现。这个作业可能要求学生或学习者利用Flash的专业功能来创建一个互动性强、视觉效果丰富...

Global site tag (gtag.js) - Google Analytics