`
dxm1986
  • 浏览: 434295 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex中鼠标滑轮控制图片大小

    博客分类:
  • Flex
阅读更多
  

    前两天给我的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中实现鼠标滑过图片时的放大效果。这种效果不仅美观,而且增加了用户的互动体验。在实际应用中,我们还可以根据需求进行进一步的定制,比如添加过渡动画、设置放大倍数限制等,以满足...

    flex 控制鼠标移动的例子

    以上就是关于Flex中控制鼠标移动的基本知识和应用实例。通过灵活运用这些技术,你可以创建出各种响应用户鼠标动作的交互式Flex应用程序。在实践中不断探索和学习,你会发现Flex提供的强大功能能够帮助你实现许多创新...

    flex鼠标拖动图片

    `contentGroup`是Flex中的一个容器,用于展示组件的内容。 ```actionscript public class DraggableImage extends UIComponent { private var bitmap:Bitmap; public function DraggableImage() { bitmap = ...

    FLEX 鼠标移上去图片放大,图片放大的倍数

    根据给定的信息,本文将详细解释如何在Flex中实现鼠标悬停时图片放大效果,并对放大倍数进行控制。此示例代码展示了如何利用Flex框架中的事件处理和属性设置来达到这一目的。 ### 一、Flex简介 Flex是一种用于开发...

    Flex布局之关于组件的大小

    在深入探讨Flex布局中关于组件大小的管理时,我们首先需要理解Flex布局的基本概念及其如何影响组件的尺寸。Flex布局是一种用于网页布局的强大工具,它能够有效地处理不同屏幕尺寸下的响应式设计,使得元素能够在容器...

    Flex相册 Flex图片

    Flex相册 Flex图片

    flex禁止鼠标右键源码

    在Flex中,我们可以利用ActionScript来处理用户事件,包括鼠标事件。当用户在应用程序上右击时,通常会触发一个`contextmenu`事件。默认情况下,这个事件会弹出浏览器或Flash Player的上下文菜单。 要禁止鼠标右键...

    FLEX中文帮助flex中文帮助

    flex中文帮助flex中文帮助flex中文帮助flex中文帮助

    flex 鼠标进入显示提示信息

    下面将详细讨论Flex中实现这一功能的关键技术和可能遇到的问题。 首先,Flex是Adobe推出的一种基于ActionScript的开源框架,用于构建富互联网应用程序(RIA)。在Flex中,我们可以使用组件库中的Tooltip类来创建...

    Flex等待鼠标的图标

    在Flex中,我们可以通过编程来改变鼠标的外观,例如在特定操作期间显示等待图标。 cursor.swf是一个SWF文件,它是Adobe Flash创作的动画或交互式内容的文件格式。SWF是用于网络上的多媒体内容,如动画、游戏、视频...

    FLex 左右滑动图片墙

    1. **布局管理器**:在Flex中,布局管理器是控制组件大小和位置的关键。在这个例子中,我们可能会使用`HorizontalLayout`或自定义的布局,以便使图片在水平方向上连续排列,从而实现滑动效果。 2. **DisplayObject...

    图片压缩flex demo

    在Flex中,我们可以使用BitmapData对象和相关方法来实现自定义的图片压缩逻辑。 "imageLoading"这个文件名可能表示该示例涉及加载图片到应用程序中,然后进行压缩。在Flex中,可以使用Loader类来加载图片资源。一旦...

    flex svg代码生成图片

    在 Flex 应用程序中,使用 SVG 资源可以实现图表生成图片并下载。以下是关于 Flex SVG 代码生成图片的知识点: 一、静态显示 SVG 图像 在 Flex 应用程序中,可以使用 SVG 资源,但只能作为一种图像引入,类似于 ...

    flex 窗口拖动与尺寸改变

    在Flex中,你可以通过MXML或者ActionScript来定义和控制这些属性。 1. **窗口拖动**:在Flex中,`MX:Window`组件默认具有拖动功能。当用户在窗口标题栏上按下鼠标左键并移动时,窗口会随着鼠标的移动而移动。这个...

    flex加载动态图片

    flexBulider页面加载动态图片的显示

    flex图片放大缩小

    4. **伸缩性(Flexibility)**: 子元素的可伸缩性由`flex-grow`, `flex-shrink`和`flex-basis`属性控制,它们共同决定了子元素在主轴上的大小。 要实现图片的放大和缩小,我们需要结合JavaScript或CSS的transform...

    flex 图片浏览,flex图片滚动效果

    在Flex中,我们可以使用各种组件来创建图片浏览和滚动效果。主要涉及以下知识点: 1. **UI组件**:Flex的核心是它的组件库,其中包括`Image`组件,用于显示单张图片。在图片浏览应用中,可能还需要`Canvas`或`...

    flex禁止鼠标右键

    在网页开发中,有时我们可能需要对某些元素或者整个页面设置禁止鼠标右键操作,以防止用户通过右键菜单执行不希望出现的功能,比如复制、查看源代码等。标题"flex禁止鼠标右键"提示我们要关注的是在使用Flex布局的...

    flex图片查看器源码

    6. **响应式设计**: 源码能够根据外部容器的变化自动调整图片大小,这是响应式设计的一部分。这意味着无论屏幕尺寸如何,图片查看器都能保持良好的用户体验。 7. **图片保存**: 用户可以保存查看的图片,这涉及到了...

    flex 怎么检测文件大小.

    在Flex中处理文件大小的检测是开发过程中常见的需求,特别是在上传或下载文件时。以下将详细介绍如何在Flex中检测文件大小。 1. **文件上传的文件大小检测** 在Flex中,用户可以通过FileReference类来实现文件上传...

Global site tag (gtag.js) - Google Analytics