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;
        }             
    }  
}

 

版权声明:若无特殊注明,本文为《曹杰峰》原创,转载请保留文章出处。
本文链接:https://www.caojiefeng.com/php/16.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框
可使用QQ号实时获取昵称+头像

私密评论

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!