Flex滚动(3D Carousel)组件

发布时间：2020-12-15 05:06:26 所属栏目：百科来源：网络整理

导读：如果你不了解Carousel组件是什么东东，请看下图： ? js开源的Carousel组件很多，具体有多少，请参考http://www.open-open.com/ajax/Carousel.htm。本文主要将的是flex的3d Carousel组件。 Doug写了很多开源组件(很佩服老外的开源精神)，他的Carousel Compone

如果你不了解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.写上以下代码，附件是整个例子的源代码。

     Java代码?? 
    
 <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:Image??source="images/2.png"?toolTip="图片1"?/>??
 ????????????????????<mx:Image??source="images/3.png"?toolTip="图片2"?/>??
 ????????????????????<mx:Image??source="images/4.png"??toolTip="图片3"/>??
 ????????????????????<mx:Image??source="images/5.png"?toolTip="图片4"?/>??
 ????????????????????<mx:Image??source="images/6.png"?toolTip="图片5"?/>??
 ????????????????????<mx:Image??source="images/7.png"?toolTip="图片6"?/>??
 ????????????</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>??

?看看效果吧

垂直效果

滚动效果

carousel.rar?(3.6 MB)
下载次数: 682
转自：http://yunzhongxia.iteye.com/blog/666179#bc2246116

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!