实现Flex中div浮动层效果的操作

最新推荐文章于 2024-04-26 09:00:00 发布

转载最新推荐文章于 2024-04-26 09:00:00 发布 · 3.4k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种使用Flex技术实现在Datagrid中鼠标悬停显示产品图片的方法。当鼠标移动到Datagrid条目上时，会弹出一个包含产品图片的浮动窗口，并随着鼠标移动。代码展示了如何创建浮动窗口、加载图片以及处理鼠标事件。

实现 FLEX的"DIV浮动层效果"
需求是鼠标移动到相应的DATAGRID的条目时出现该产品的图片，并且图片跟着鼠标的移动而移动
var titleWindow:TitleWindow;
var img:Image;
protected function dataGrid_itemRollOverHandler(event:ListEvent):void
{
// var posmodelVO:PosModelVO=dataProvider.getItemAt(event.rowIndex) as PosModelVO;
var posmodelVO:PosModelVO=event.itemRenderer.data as PosModelVO
if(titleWindow==null){
titleWindow=new TitleWindow();
img=new Image
img.width=100;
img.height=133;
img.maintainAspectRatio=false;
titleWindow.addElement(img);
titleWindow.width=110;
titleWindow.height=145;
titleWindow.setStyle("headerHeight","0");
titleWindow.setStyle('borderSides','solid');
titleWindow.setStyle('borderThickness','3');
PopUpManager.addPopUp(titleWindow,this,false);
}
if(posmodelVO.image!=null){
titleWindow.visible=true;
img.source=posmodelVO.image;
titleWindow.x=mouseX;
titleWindow.y=mouseY;
}else {
titleWindow.visible=false;
}
}