前两天给我的FLEX博客(www.wolfdream.cn)加了一个鼠标滑动条控制图片大小的功能,主要是通过在图片上加鼠标滑轮滚动事件,然后根据滑轮滚动时,获得那个刻度上的值(滑轮向上滚为正值,向下滚为负值),然后再动态调整图片的长和宽。
下面把代码贴出来一下:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="500" height="500"
backgroundColor="#0A7276" toolTip="鼠标滑轮滚动可以控制图片大小"
showCloseButton="true"
close="closeWindow()"
initialize="init()"
borderColor="#0A7276"
headerHeight="20"
title="{imgname}"
>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
private function closeWindow():void{
mx.managers.PopUpManager.removePopUp(this);
}
[Bindable]
private var source:String;
[Bindable]
private var imgname:String;
private function init():void{
this.width=this.screen.width-300;
this.height=this.screen.height-50;
this.x=(this.screen.width-this.width)/2;
this.y=(this.screen.height-this.height)/2;
source=LatestImage.path;
imgname=LatestImage.iname;
addEventListernerToImage();
}
private function showSrcpage():void{
var u:URLRequest=new URLRequest(image.source.toString());
navigateToURL(u,'_blank');
}
private function addEventListernerToImage():void{
this.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);
}
private function mouseWheelHandler(event:MouseEvent):void{
resizeImageSize(event.delta);//deta为滑轮滚动时的刻度值
}
private function resizeImageSize(size:int):void{
var w:int;
var h:int;
if(size>0){
w=image.width*(1+size/10);
h=image.height*(1+size/10);
}else if(size<0){
w=image.width/(1-size/10)
h=image.height/(1-size/10)
}
if(image.width<50||image.height<50){
w=50;
h=50*(image.height/image.width);
}else if(image.width>=this.width||image.height>=this.height){
h=this.height-50;
w=(h*image.width)/image.height;
}
image.width=w;
image.height=h;
}
]]>
</mx:Script>
<mx:VBox height="100%" width="100%">
<mx:HBox height="100%" width="100%">
<mx:Spacer width="50%"/>
<mx:Image width="100%" height="100%"
maxHeight="{this.height-40}" maxWidth="{this.width-50}"
source="{source}" id="image"
toolTip="{imgname}:点击查看原图片"
click="showSrcpage()" mouseChildren="false"
buttonMode="true" useHandCursor="true"
/>
<mx:Spacer width="50%"/>
</mx:HBox>
</mx:VBox>
</mx:TitleWindow>
分享到:
相关推荐
flex 控制鼠标移动的例子
flex用鼠标拖动图片,鼠标放开停止拖动
实现WIN7效果的FLEX当鼠标滑过到每个图片时图片放大。非常不错的效果!
Flex布局之关于组件的大小 Flex布局之关于组件的大小
Flex相册 Flex图片
图片应用,FLEX 鼠标移上去图片放大,图片放大的倍数
flex中文帮助flex中文帮助flex中文帮助flex中文帮助
flex应用程序中,默认情况下会有鼠标右击事件,该源码就是如何禁止鼠标右键的源码
flexBulider页面加载动态图片的显示
flex禁止鼠标右键
Flex等待鼠标的图标 cursor.swf SWF文件格式
flex4舞台尺寸随浏览器窗口大小改变.rar
flex中文帮助文档flex中文帮助文档
flex 鼠标进入显示提示信息,含示例与源码,不过在鼠标出屏的时候,计算位置有一些问题.如有朋友能解决,请回复一下.谢谢!
用flex开发的图片浏览效果。很酷 flex图片滚动效果 下载拷贝到flexbuilder中就可以用
flex 图片查看器 flex图片 zoomin zoomout 图片查看器
flex 鼠标 drawRect 画矩形
Flex4中头部背景图片的Accordion实例。 案例。
flex 图片浏览\放大\缩小,
Flex应用zoom实现图片的放大缩小,很简单的实例,可以给新手一些思路