`
天梯梦
  • 浏览: 13731421 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

flex gallery / 产品展示

阅读更多

代码:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" creationComplete="photo()">
	
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.controls.Button;
			
			public var img:Array = [];
			public var urls:Array = [];
			public var buttons:Array = [];
			
			public var total:int = 4;
			public var currenIndex:int = 0;
			public var ttime:Timer;
			
			private function photo():void{				
				var iphoto:Array = ['assets/1.jpg','assets/2.jpg','assets/3.jpg','assets/4.jpg'];
				var iurl:Array = ['http://www.baidu.com','http://www.google.com','http://www.yahoo.com','http://www.msn.com'];
				
				for(var n:int = 0; n < total; n++){ 
					
					var button:Button = new Button;
					button.width=30;
					button.height=15;
					button.setStyle("fontWeight","normal");
					button.setStyle("cornerRadius","0");
					button.setStyle("fontSize","9");
					button.setStyle("color","#FFFFFF");
					button.setStyle("backgroundColor","#FF0000");
					button.setStyle("fillColors",["#FF0000","#FF0000"]);
					button.setStyle("fillAlphas",[0.3, 0.3]);
					button.label = new String(n+1);  // 相当于 value
					button.buttonMode = true;        // 手型
					button.addEventListener(MouseEvent.CLICK,selectImage);	// 添加行为
					buttons[n]=button;            
					ibtn.addChild(button);           // 添加元素
					
					var listImage:Image = new Image();
					listImage.x = 0;
					listImage.y = 0;
					listImage.source = iphoto[n];   // 相当于 src
					listImage.toolTip = iphoto[n];  // 相当于 title
					listImage.width = frame.width;
					listImage.height = frame.height;
					listImage.visible = false;
					
					//根据当前时间随即选择4种切换效果之一
					var p:Number = (new Date()).getTime() % 4;
					var eff:String;
					switch(p) {
						case 0:
							eff = "fadeIn";
							break;
						case 1:
							eff = "myIris";
							break;
						case 2:
							eff = "aIris";
							break;
						case 3:
							eff = "aWipeLeft";
							break;
						default:
							eff = "myDissolve";
					}
					listImage.setStyle("showEffect",eff);	
					listImage.buttonMode = true;
					listImage.addEventListener(MouseEvent.CLICK,gotoUrl);
					
					urls[n] = iurl[n];
					img[n] = listImage;
					frame.addChild(listImage);				
				}
				
				//设定图片切换按钮的位置
				ibtn.x = 330;
				ibtn.y = 320;				
				
				clickIndex(currenIndex);
				(buttons[currenIndex] as Button).setStyle("fontWeight","bold");
				(buttons[currenIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);
				
				//new一个timer控件,每隔2秒钟变换一次
				ttime = new Timer(3000,0);  
				ttime.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});
				ttime.start(); 
			}
			
			private function clickIndex(i:int):void{
				(img[i] as Image).visible = false;
				frame.setChildIndex(img[i],img.length-1);
				(img[i] as Image).visible = true;
				currenIndex = i;				
			}
			
			private function autoPlay():void{			
				(buttons[currenIndex] as Button).setStyle("fontWeight","normal");    
				(buttons[currenIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);
				
				currenIndex ++ ;
				if (currenIndex >= img.length) {
					currenIndex = 0;
				}
				
				(buttons[currenIndex] as Button).setStyle("fontWeight","bold");
				(buttons[currenIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);			
				clickIndex(currenIndex);				
			}
			
			private function selectImage(event:MouseEvent):void {
				
				ttime.reset();
				ttime = new Timer(3000,0);  
				ttime.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});				
				ttime.start();
				
				var button:Button = Button(event.currentTarget);
				var index:Number = ibtn.getChildIndex(button);
				
				if (index == currenIndex) return;
				(buttons[currenIndex] as Button).setStyle("fontWeight","normal");    
				(buttons[currenIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);
				
				button.setStyle("fontWeight","bold");
				button.setStyle("fillAlphas",[1.0, 1.0]);
				
				clickIndex(index);
			}	
			
			private function gotoUrl(evt:MouseEvent):void{
				navigateToURL(new URLRequest(urls[currenIndex]), "_blank");  
			}

		]]>
	</mx:Script>
	
	<mx:Style>
		Button{
			cornerRadius: 12;
			creationCompleteEffect:Zoom;
		}
	</mx:Style>
	
	<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
	<mx:Iris id="aIris"/>
	<mx:Iris id="myIris" />
	<mx:WipeLeft id="aWipeLeft" />
	<mx:Dissolve id="myDissolve" color="black"/>
	
	<mx:Canvas x="0" y="0" id="frame" width="500" height="364" horizontalScrollPolicy="off" verticalScrollPolicy="off"  useHandCursor="true"> </mx:Canvas>	
	<mx:HBox id="ibtn" horizontalAlign="right" verticalAlign="bottom"> </mx:HBox>
</mx:Application>
分享到:
评论

相关推荐

    05 - Flex Panel Gallery.rar

    【标题】"05 - Flex Panel Gallery" 是一个与JavaScript相关的项目,可能是一个网页组件或者交互式设计模板,主要用于创建灵活的面板展示画廊。在JavaScript领域,"Flex"通常指的是灵活性,暗示这个面板画廊可以适应...

    FLEX简单的Flex 相册(附源码)

    Flex相册是一个基于Adobe Flex技术开发的多媒体展示应用,它允许用户以美观的方式浏览和管理图像集合。在本文中,我们将深入探讨Flex相册的实现原理、主要组件以及如何进行扩展。 1. Flex简介: Flex是Adobe公司...

    javascript_gallery.rar

    JavaScript Gallery 是一个基于JavaScript的图片展示库,常用于创建具有动态效果的相册或图片展示模块。这个RAR压缩包中的核心文件"javascript_gallery.html"很可能包含了一个演示或实例,展示了如何使用JavaScript...

    推荐60+ Flex开发参考网站.docx

    此外,还有许多其他网站提供Flex应用实例、组件示例、技术文章和博客,如FLEX Applications Showcase Gallery、IFBIN免费开放源码Flex示例、Why choose yFiles FLEX?、Flex File Upload Examples等。这些资源覆盖了...

    Flex 相册管理(个人觉得挺好的)

    总的来说,Flex相册管理应用展示了Flex在创建用户友好、视觉吸引力强的Web应用方面的优势。通过合理利用Flex的组件、数据绑定、动画和资源管理等功能,开发者能够轻松构建出功能完备且具有良好用户体验的相册应用。

    Gallery_Img.zip

    《 Gallery_Img.zip:图片展示技术的深度解析与实践》 在数字时代,图像的展示方式对于用户体验至关重要,尤其在网站、应用或者个人项目中。本文将深入探讨"Gallery_Img.zip"这一压缩包文件中所包含的知识点,主要...

    flex编写的试衣间代码

    在Flex中,XML常用于数据交换和存储,这里可能是用来管理衣物图片、名称、描述等信息,供程序动态加载和展示。 综上所述,这个Flex编写的试衣间代码可能包含了一个基本的虚拟试衣间应用的架构,其中包括用户界面...

    适合电脑全屏的图片广告展示代码

    display: flex; /* 弹性盒模型,方便调整图片布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ overflow: hidden; /* 隐藏溢出部分,防止图片超出屏幕 */ } ``` 3. **...

    垂直Gallery

    这种设计适用于那些希望以优雅方式展示大量图片的网站或应用,比如摄影网站、画廊、电商产品展示等。下面将详细解释"垂直Gallery"的相关知识点,以及可能涉及的技术和实现方式。 首先,**HTML结构**是基础。一个...

    PhotoFlowGallery.zip_FlashMX/Flex源码_FlashMX_

    总的来说,"PhotoFlow Gallery"是一个集成了Flash MX/Flex技术和AS3编程精髓的项目,展示了如何通过这些工具实现一个功能强大且视觉效果出众的图片浏览应用。对这个源码的学习,不仅能帮助开发者掌握ActionScript 3...

    JS-Flex-Panels-Image-Gallery

    【描述】"JS-Flex-Panels-Image-Gallery" 是一个使用了Flex布局的JavaScript图像画廊实现。它允许用户通过灵活的面板来浏览一组图片,这些面板可以适应不同的屏幕尺寸,提供了一种优雅的方式来展示多张图片。此项目...

    html源码 图片展示

    在图片展示网站中,`&lt;head&gt;`部分通常包含CSS(Cascading Style Sheets)链接,用于定义页面样式,而`&lt;title&gt;`则定义了浏览器标签页上的标题。 图片展示的核心元素是`&lt;img&gt;`标签,用于插入图像。它的基本语法是: ``...

    Quotes-Gallery-Panels:带引号的图像画廊,使用JSCSS转换和flexbox可以放大和扩展单击它们。 受到30天VanillaJS挑战赛第五天的启发:Flex Panels图片库

    "Quotes-Gallery-Panels"项目提供了一个创新的解决方案,它是一个带有引号的图像画廊,利用JavaScript (JSCSS) 和CSS的Flexbox布局特性,实现了一个动态的、可放大的图片展示库。这个项目受到了30天VanillaJS挑战赛...

    简单网络相册CSS模板-简单 网络 相册 Gallery 图片 窄

    “Gallery”一词表明这个模板着重于创建一个图片展示区域,可能包含滑动、缩放、网格布局等效果,便于用户浏览和欣赏照片。在CSS中,我们可以利用选择器(如类选择器、ID选择器等)、盒模型、定位和浮动等技术来实现...

    gallery:对于个人博客

    在个人博客建设中,"Gallery"通常指的是一个用于展示图片或多媒体内容的模块。这个"gallery: 对于个人博客"的标题可能是指一种专门设计用于博客的图片展示解决方案。在这个场景下,HTML(HyperText Markup Language...

    jQuery仿Facebook网格图片画廊.zip

    在网页设计中,图片画廊是一种常见的元素,用于展示一组图片,提供良好的用户体验。随着社交媒体的普及,Facebook的图片展示方式因其直观和响应式的特性受到设计师们的喜爱。本文将详细介绍如何使用jQuery、CSS和...

    简单的画廊功能

    在IT领域,一个“简单的画廊功能”通常指的是在网页或应用程序中实现图像展示的功能模块。这个功能允许用户浏览、管理或分享图片,是许多网站和应用中的常见元素,尤其适用于个人博客、摄影网站或者社交媒体平台。...

    简单的相册CSS模板_简单 相册 图片 Gallery.zip

    2. 图片布局:为了实现相册的展示效果,可能采用了不同的布局策略,比如网格布局(使用`display: grid`)、流式布局(`display: flex`)或者瀑布流布局。这些布局方式可以根据屏幕尺寸和设备类型进行响应式调整,以...

Global site tag (gtag.js) - Google Analytics