Flex滚动(3D Carousel)组件

最新推荐文章于 2024-10-11 20:41:52 发布

yunzhongxia

最新推荐文章于 2024-10-11 20:41:52 发布

阅读量146

点赞数

分类专栏： flex 文章标签： Flex Ajax

flex 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一个Flex的3D Carousel组件——CoverFlowContainer的使用方法，通过实例展示了如何实现图片的3D滚动展示效果，并介绍了所需库文件及XML配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果你不了解Carousel组件是什么东东，请看下图：

js开源的Carousel组件很多，具体有多少，请参考http://www.open-open.com/ajax/Carousel.htm。本文主要将的是flex的3d Carousel组件。

Doug写了很多开源组件(很佩服老外的开源精神)，他的Carousel Component组件是一个3D的滚动组件，组件继承自ViewStack，可以水平或者垂直展示。下面就举个简单的例子，步骤如下：

1.导入papervision_phunky.swc和tweener.swc。其中第一个包主要是3D效果，第二个是倒影滤镜效果。

2.准备好几个要展示的图片。

3.引入xmlns:containers="com.dougmccune.containers.*"命名空间。

4.写上以下代码，附件是整个例子的源代码。

<mx:VBox id="box" verticalGap="0" height="100%" width="100%" maxWidth="600" maxHeight="400" >
			
			<containers:CoverFlowContainer id="coverflow" width="100%" height="100%" 
				horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"
				segments="6" reflectionEnabled="true">
				
				<mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">
					<mx:Image  source="images/1.png" />
				</mx:HBox>
			    <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">
					<mx:Image  source="images/2.png" toolTip="图片1" />
				</mx:HBox>
				<mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">
					<mx:Image  source="images/3.png" toolTip="图片2" />
				</mx:HBox>
				<mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">
					<mx:Image  source="images/4.png"  toolTip="图片3"/>
				</mx:HBox>
				<mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">
					<mx:Image  source="images/5.png" toolTip="图片4" />
				</mx:HBox>
				<mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">
					<mx:Image  source="images/6.png" toolTip="图片5" />
				</mx:HBox>
				<mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">
					<mx:Image  source="images/7.png" toolTip="图片6" />
				</mx:HBox>
			</containers:CoverFlowContainer>
			<mx:HScrollBar id="scrollbar" width="100%" pageSize="1" maxScrollPosition="{coverflow.numChildren - 1}"
				scrollPosition="{coverflow.selectedIndex}" 
				scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />
		</mx:VBox>

看看效果吧

垂直效果

滚动效果