transparent透明模式下控制Flash组件的滚动条

  • 内容
  • 相关

在做WEB开发的过程中可能会遇到Flash组件遮挡页面中DOM元素的情况,可以在插入Flash的embed或object标签中加入“wmode”属性并设置其值为“transparent”(透明模式)解决此问题,但是透明模式会随之带来另一个麻烦:鼠标滚轮无法控制Flash中的滚动条。

虽然Flash组件中的滚动条无法用鼠标滚轮控制,但是JS依然可以捕捉鼠标滚轮事件并传递给Flash中的相应函数,利用此原理可以重建Flash组件的鼠标滚轮操作。

以Flex dataGrid组件滚动条为例:

1. 在组件MXML页面的初始化init()方法中添加JS监听,代码如下:

// 绑定JS监听方法
ExternalInterface.call("addMouseWheelListener");
// 创建回调函数
ExternalInterface.addCallback("jsWheelZoom", jsWheelZoom);

2.在JS文件中实现监听,代码如下(em元素内为自定义组件对象标识):

// 根据浏览器添加JS鼠标滑轮滚动监听
function addMouseWheelListener() {
	var viFlash = thisMovie("Bottom");
	var ua = navigator.userAgent;
	if (ua.indexOf("Firefox") > -1) {
		viFlash.addEventListener("DOMMouseScroll", onWheelZoom, false);
	} else {
		if (ua.indexOf("MSIE") == -1) {
			viFlash.addEventListener("mousewheel", onWheelZoom, false);
		} else {
			viFlash.attachEvent("onmousewheel", onWheelZoom);
		}
	}
}
// 滚轮滑动触发监听调用 AS中的相应方法
function onWheelZoom(event) {  
	var app = window.document["Bottom"];
	if (app) {
		var o = {delta:event.wheelDelta};
		thisMovie("Bottom").jsWheelZoom(o);
	}
}
// 根据传入标识得到对象
function thisMovie(movieName) {
	if (navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName];
	} else {
		return document[movieName];
	}
}

3.回到Flex实现AS回调函数,代码如下(em元素内为自定义dataGrid对象标识):

// 接收JS滚轮事件
public function jsWheelZoom(o:Object):void {
	var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_WHEEL,true);  
    e.delta = -(o.delta);
    onWheelZoom(e); 
}
// 实现滚动条操作
private function onWheelZoom(e:MouseEvent):void {
	if(e.delta>2)  
	{  
		this.vms_grid.verticalScrollPosition += 1;
		if(this.vms_grid.verticalScrollPosition > this.vms_grid.maxVerticalScrollPosition)
		{
			this.vms_grid.verticalScrollPosition = this.vms_grid.maxVerticalScrollPosition
		}
	}  
	if(e.delta<-2)  
	{  
		this.vms_grid.verticalScrollPosition -= 1;     
		if(this.vms_grid.verticalScrollPosition < 0)
		{
			this.vms_grid.verticalScrollPosition = 0;
		}             
	}  
}


本文标签:

版权声明:若无特殊注明,本文皆为《司马迁》原创,转载请保留文章出处。

本文链接:transparent透明模式下控制Flash组件的滚动条 - http://tv1314.com/post-277.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

5条评论
  1. avatar

    安好 Lv.1 Chrome 45.0.2454.101 Chrome 45.0.2454.101 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    博主求你的文章版权代码-发我邮箱:1939649154回复了qq.com可以么、

    广东省深圳市 长城宽带

    1. 鬼少 Chrome 49.0.2623.87 Chrome 49.0.2623.87 Windows Windows 回复

      模板自带。

      广东省深圳市 电信

    2. 安好 Lv.1 Chrome 45.0.2454.101 Chrome 45.0.2454.101 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      好吧

      广东省深圳市 长城宽带

  2. avatar

    web前端 Lv.2 Firefox 17.0 Firefox 17.0 GNU/Linux x64 GNU/Linux x64 回复

    Flash已死,没什么折腾的

    北京市 电信

    1. avatar

      大胸伺候您 Lv.1 Firefox 29.0 Firefox 29.0 Windows 7 Windows 7 回复

      [打针]

      湖北省随州市 移动

      00:00 / 00:00
      顺序播放