flex编写的一个相册浏览
发布时间:2020-12-15 01:09:55 所属栏目:百科 来源:网络整理
导读:1、目录树: ?????? ? 2、demo_viewImage.mxml ?xml version="1.0" encoding="utf-8"?s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="application1_creationCompleteHandler(event)" xmlns:s="library://ns.adobe.com/flex/spar
1、目录树: ?????? ? 2、demo_viewImage.mxml <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="application1_creationCompleteHandler(event)" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:viewImage="demo.viewImage.*" backgroundColor="#000000"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.FlexEvent; import myevents.ViewImageEvent; private var count:int;//总数 private var step:int = 4;//步长 private var currentPage:int = 0;//当前页 [Bindable] private var dataImg:ArrayCollection = new ArrayCollection(); //图片数据对象 /*启动函数*/ protected function application1_creationCompleteHandler(event:FlexEvent):void { setDataImg();//初始化所有图片数据 this.addEventListener(ViewImageEvent.IMG,VIEHandler);//注册单击图片监听事件 } /*注册点击图片监听事件回归函数*/ private function VIEHandler(event:ViewImageEvent):void { viewIMG.source = dataImg[int(event.getEventValue)].img; } /*初始化图片数据对象*/ private function setDataImg():void { for(var i:int = 0; i < 6; i++) { var o:Object = new Object(); o.img = "demo/viewImage/images/" + i + ".png"; o.littleImg = "demo/viewImage/images/little_" + i + ".png"; dataImg.addItem(o); count++; } setLittleImg(0,step); } /*分页设置缩略图*/ private function setLittleImg(start:int,step:int):Boolean { vb.removeAllChildren(); for(var i:int = start; i < start + step; i++) { if((i+1) > count) { if(i == start){ return false; } return true; } if(i < 0) { if(i == start){ return false; } return true; } var littleImage:LittleImage = new LittleImage(); vb.addChild(littleImage); littleImage.littleImg.source=dataImg[i].littleImg; littleImage.setArg_littleImg = i.toString(); if(i == start) { viewIMG.source = dataImg[i].img; } } return true; } /*左翻页处理*/ private function leftClick(event:MouseEvent):void { if(!setLittleImg(currentPage-1,step)) { Alert.show("没有上一张了","提示信息"); setLittleImg(currentPage,step); currentPage = 0; } else { currentPage--; } } /*右翻页处理*/ private function rightClick(event:MouseEvent):void { if(!setLittleImg(currentPage+1,step)) { Alert.show("已经是最后一张了",step); currentPage = count-1; } else { currentPage++; } } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <mx:Image id="viewIMG" width="600" height="450" source="demo/viewImage/images/2.png" /> <mx:HBox width="700" height="100" horizontalGap="10" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <viewImage:leftImage click="leftClick(event);"/> <mx:HBox width="100%" height="100%" id="vb" horizontalGap="13"> </mx:HBox> <viewImage:rightImage click="rightClick(event);"/> </mx:HBox> </s:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="107" height="100" backgroundColor="#000000"> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ [Bindable] private var s:String = "demo/viewImage/image/back.png"; private function moClick(event:MouseEvent):void { s = "demo/viewImage/image/left.png"; } private function moutClick(event:MouseEvent):void { s = "demo/viewImage/image/back.png"; } ]]> </fx:Script> <mx:Image id="leftImg" width="107" height="100" source="{s}" buttonMode="true" useHandCursor="true" mouSEOver="moClick(event);" mouSEOut="moutClick(event);"/> </mx:VBox>
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="107" height="100" backgroundColor="#000000"> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ [Bindable] private var s:String = "demo/viewImage/image/back.png"; private function moClick(event:MouseEvent):void { s = "demo/viewImage/image/right.png"; } private function moutClick(event:MouseEvent):void { s = "demo/viewImage/image/back.png"; } ]]> </fx:Script> <mx:Image id="leftImg" width="107" height="100" source="{s}" buttonMode="true" useHandCursor="true" mouSEOver="moClick(event);" mouSEOut="moutClick(event);"/> </mx:VBox>
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="107" height="100"> <fx:Script> <![CDATA[ import myevents.ViewImageEvent; [Bindale] public var arg_littleImg:String; //用户存放图片对象的ID public function set setArg_littleImg(args:String):void { arg_littleImg = args; } protected function littleImg_clickHandler(event:MouseEvent):void { var viewImageEvent:ViewImageEvent= new ViewImageEvent(ViewImageEvent.IMG,this.arg_littleImg,true); dispatchEvent(viewImageEvent); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <mx:Image id="littleImg" width="107" height="100" source="demo/viewImage/images/little_2.png" buttonMode="true" useHandCursor="true" click="littleImg_clickHandler(event)"/> </mx:VBox>
package myevents { import flash.events.Event; public class ViewImageEvent extends Event { public static const LEFT:String = "LEFT"; public static const RIGHT:String = "RIGHT"; public static const IMG:String = "IMG"; [Bindable] private var eventValue:String; public function ViewImageEvent(type:String,ev:String,bubbles:Boolean = false,cancelable:Boolean = false ) { super(type,bubbles,cancelable); this.eventValue = ev; } public function get getEventValue():String { return this.eventValue; } } }
6、运行效果图 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |