`

flex Repeater effert加效果

    博客分类:
  • flex
阅读更多
package cn.ishion.component
{
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	
	import mx.core.IContainer;
	import mx.core.Repeater;
	import mx.events.ChildExistenceChangedEvent;
	import mx.events.FlexEvent;

	public class ConstomRepeater extends Repeater
	{
		private var showTimer:Timer;
		private var isEffert:Boolean=true;
		
		private var currentShowIndex:int=-1;
		public function ConstomRepeater()
		{
			super();
			this.addEventListener(FlexEvent.REPEAT_END,repeatEndHandler);
			showTimer=new Timer(1000);
			showTimer.addEventListener(TimerEvent.TIMER,startShow);
		
		}
		override public function initializeRepeater(ic:IContainer,recurse:Boolean):void{
			super.initializeRepeater(ic,recurse);
			if(ic){
				ic.addEventListener(ChildExistenceChangedEvent.CHILD_ADD,addChildHandler);
			}
			
			
		}
		private function addChildHandler(event:ChildExistenceChangedEvent):void{
				event.relatedObject.visible=false;
				trace("set date");
			}
		private function startShow(event:TimerEvent):void{
			var timer:Timer=event.target as Timer;
			try{
				trace(timer.currentCount);
				this.container.getChildAt(timer.currentCount-1).visible=true;
				
			}catch(e:Error){
				trace("error");
			}
			
		}
		override public function set dataProvider(value:Object):void{
			super.dataProvider=value;
			
		}
		/**
		 * 开始一个一个显示
		 * */
		private function repeatEndHandler(event:FlexEvent):void{
//			if(showTimer.running){
//				
//			}
			this.showTimer.repeatCount=this.container.numChildren;
			this.showTimer.reset();
			this.showTimer.start();
			
		}
		
	}
}

 示例

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				xmlns:component="cn.ishion.component.*">

	<mx:ArrayCollection id="images">
		<mx:Object src="@Embed('assert/7.jpg')">

		</mx:Object>
		<mx:Object src="@Embed('assert/7.jpg')">

		</mx:Object>
		<mx:Object src="@Embed('assert/7.jpg')">

		</mx:Object>
		<mx:Object src="@Embed('assert/7.jpg')">

		</mx:Object>
		<mx:Object src="@Embed('assert/7.jpg')">

		</mx:Object>
	</mx:ArrayCollection>

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import flash.utils.clearInterval;
			import flash.utils.setInterval;
			import mx.events.ChildExistenceChangedEvent;
			import mx.core.Container;
			import mx.containers.HBox;


			private function changeDate():void
			{

				rep.dataProvider=images;

			}
			import mx.effects.easing.Elastic
		]]>
	</mx:Script>


	<mx:Zoom id="zoom"
			 zoomWidthFrom="0.1"
			 zoomWidthTo="1"
			 zoomHeightFrom="0.1"
			 zoomHeightTo="1"
			 easingFunction="Elastic.easeOut">

	</mx:Zoom>
	<mx:HBox id="hb">
		<component:ConstomRepeater id="rep"
								   dataProvider="{images}">
			<mx:Image source="{rep.currentItem.src}"
					  scaleY="0.1"
					  scaleX="0.1"
					  visible="false"
					  showEffect="{zoom}"/>
		</component:ConstomRepeater>
	</mx:HBox>
	<mx:Button click="changeDate()">

	</mx:Button>

</mx:Application>
 
分享到:
评论

相关推荐

    flex Repeater标签使用教程

    ### Flex Repeater标签使用教程 #### 一、引言 在Flex开发中,`Repeater`组件是一个非常实用的功能,它允许开发者根据动态或静态的数据数组,在运行时重复显示一个或多个用户界面组件。这对于创建动态且响应式界面...

    Repeater嵌套Repeater 动态数据绑定

    嵌套`Repeater`就是将一个`Repeater`放在另一个`Repeater`内部,外部的`Repeater`用于显示主表数据,内部的`Repeater`则用于显示对应从表的详细信息。 实现这个功能的关键步骤如下: 1. **数据库设计**:创建两个...

    repeater动态首尾相接显示图片

    为了实现首尾相接的效果,我们可以利用CSS的`display: flex`和`flex-wrap: wrap`属性,以及JavaScript来处理最后一个元素的衔接。在ItemTemplate中,每个图片和标题被封装在一个容器里,通过CSS控制它们的布局。 ``...

    asp.net中Repeater控件嵌套Repeater调数据方法

    ### ASP.NET中Repeater控件嵌套Repeater的实现方法 在ASP.NET Web应用程序开发过程中,经常需要展示分层或嵌套的数据结构。一个常见的需求是,在一个列表中的每个项目都需要展示一组相关的子项,例如产品分类下的多...

    Repeater表头排序,Repeater嵌套

    本篇文章将详细探讨"Repeater表头排序"和"Repeater嵌套"这两个重要知识点。 首先,我们来看"Repeater表头排序"。在数据展示时,用户往往需要对数据进行排序,以便更直观地理解和分析信息。在Repeater中实现表头排序...

    远程桌面中转——VNC Repeater架设方案文档

    远程桌面中转方案基于 VNC Repeater 架设方案文档 远程桌面中转是指在公网环境下,使用远程桌面客户端连接到远程桌面服务端的过程。这种连接通常需要经过服务器的中转,以便于客户端和服务端之间的通讯。目前,市面...

    asp.net装载页面进度条以及Repeater分页

    下面将详细讲解如何在ASP.NET中实现页面装载进度条,以及Repeater控件的分页功能。 首先,让我们关注页面装载进度条的实现。在ASP.NET中,可以通过JavaScript和服务器端代码配合来创建一个简单的进度条效果。以下是...

    Repeater控件无限级显示菜单

    在ASP.NET开发中,Repeater控件是一种非常灵活的数据绑定控件,用于动态地呈现数据。本项目利用Visual Studio 2010(VS2010)作为开发工具,结合SQL Server 2005或更高版本的数据库,通过Repeater控件实现了无限级...

    Repeater控件的使用

    在ASP.NET Web Forms开发中,`Repeater`控件是一个非常强大的数据绑定工具,它用于显示来自数据源的动态、自定义格式的数据。本篇文章将深入探讨`Repeater`控件的使用,包括如何实现编辑、删除功能以及如何进行嵌套...

    repeater的简单用法

    对于初学者来说,理解其工作原理并熟练运用,能有效地提升开发效率和网页展示效果。在实际项目中,根据具体需求,合理利用Repeater控件及其相关的事件处理和数据绑定机制,可以实现各种复杂的数据展示和交互功能。

    repeater嵌套repeater嵌套

    repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater嵌套repeater...

    Repeater 显示5条数据

    在.NET框架中,Repeater控件是一个非常灵活的数据绑定控件,主要用于呈现数据集合中的每一条记录。在ASP.NET Web Forms开发中,Repeater经常被用于创建自定义布局的列表或者表格,因为它允许开发者完全控制HTML输出...

    Repeater嵌套方法

    在.NET框架中,Repeater控件是一种用于显示数据列表的Web控件,它能够以模板为基础展示数据项,为开发者提供灵活的方式来控制数据的显示格式。在这个过程中,经常会有嵌套Repeater控件的需求,即在一个Repeater控件...

    repeater固定列

    外层`Repeater`循环次数为期望的列数,内层`Repeater`则根据剩余数据进行填充。 四、代码实现 以CSS Grid为例,`Default.aspx`页面可能包含如下HTML和服务器端控件: ```html &lt;asp:Repeater ID="rptColumns" runat...

    repeater控件使用实例

    在ASP.NET Web Forms中,`Repeater`控件是一个非常重要的数据绑定控件,它提供了高度自定义的模板布局功能,允许开发者灵活地呈现数据。本实例将深入讲解`Repeater`控件的使用方法,包括其基本概念、结构、绑定数据...

    repeater最牛最简洁统计法

    标题中的“repeater最牛最简洁统计法”指的是在ASP.NET框架中,Repeater控件的一种高效、简洁的统计方法。Repeater控件是ASP.NET Web Forms中的一个数据绑定控件,它允许开发者以非常灵活的方式显示数据集,通常用于...

    Repeater折叠菜单

    在网页设计中,折叠菜单通常通过JavaScript或jQuery实现,与服务器端的Repeater控件配合使用,可以实现数据驱动的动态折叠效果。 创建Repeater折叠菜单的过程主要包括以下步骤: 1. **数据准备**:首先,你需要有...

    repeater动态合并列

    本知识点主要聚焦于如何利用Repeater控件实现“动态合并列”的功能,这在展示大量表格数据时特别有用,能够减少页面的视觉混乱并提高可读性。 首先,我们需要理解Repeater的基本用法。Repeater控件本身不包含任何...

    repeater很好的例子:嵌套

    这个“repeater很好的例子:嵌套”是一个关于如何使用`Repeater`控件进行层次化数据展示的示例。我们将深入探讨`Repeater`的嵌套用法,以及在C#中如何实现这一功能。 `Repeater`控件的基本用法是通过编程方式定义...

Global site tag (gtag.js) - Google Analytics