`
scoffor
  • 浏览: 16848 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Flex滚动(3D Carousel)组件仿mac

    博客分类:
  • Flex
阅读更多

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" >   
2.               
3.            <containers:CoverFlowContainer id="coverflow" width="100%" height="100%"    
4.                horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"  
5.                segments="6" reflectionEnabled="true">   
6.                   
7.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
8.                    <mx:Image  source="images/1.png" />   
9.                </mx:HBox>   
10.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
11.                    <mx:Image  source="images/2.png" toolTip="图片1" />   
12.                </mx:HBox>   
13.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
14.                    <mx:Image  source="images/3.png" toolTip="图片2" />   
15.                </mx:HBox>   
16.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
17.                    <mx:Image  source="images/4.png"  toolTip="图片3"/>   
18.                </mx:HBox>   
19.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
20.                    <mx:Image  source="images/5.png" toolTip="图片4" />   
21.                </mx:HBox>   
22.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
23.                    <mx:Image  source="images/6.png" toolTip="图片5" />   
24.                </mx:HBox>   
25.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
26.                    <mx:Image  source="images/7.png" toolTip="图片6" />   
27.                </mx:HBox>   
28.            </containers:CoverFlowContainer>   
29.            <mx:HScrollBar id="scrollbar" width="100%" pageSize="1" maxScrollPosition="{coverflow.numChildren - 1}"  
30.                scrollPosition="{coverflow.selectedIndex}"    
31.                scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />   
32.        </mx:VBox>  

  

 

 效果如下:

 

垂直效果

 

 

 

滚动效果

 

分享到:
评论
1 楼 Frederic 2010-07-12  
做得好啊,收藏

相关推荐

    react-spring-3d-carousel:一个3D Carousel组件,用于使用React构建并利用React Spring来控制幻灯片过渡的图像

    React Spring 3D轮播一个3D Carousel组件,用于使用构建的图像并利用 控制幻灯片过渡。 它的主要目的是通过goToSlide道具进行控制,但是如果您不想自己进行导航,我还提供了showNavigation道具。 这应该不言而喻,...

    react-carousel-3d:React中的 3D carousal 组件

    React 3D Carousel 组件React中的 3D 轮播组件(支持滑动)。演示 jsfiddle ( )安装新产品经理 npm i 3d-react-carousal纱 yarn add 3d-react-carousal在 public.html 中为箭头添加 fa-css &lt;link href=...

    Vue2原先轮播图组件 Carousel组件 slide组件

    Vue2原生始轮播图组件,支持宽度自适应、高度设置、轮播时间设置、左右箭头按钮控制,圆点按钮切换,以及箭头、圆点按钮是否显示。 &lt;v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" ...

    3D Carousel旋转木马轮播特效.rar

    【标题】"3D Carousel旋转木马轮播特效.rar"所涉及的知识点主要集中在网页开发中的动态效果实现,特别是利用jQuery和CSS技术来构建一种视觉上引人入胜的交互体验。旋转木马(Carousel)轮播特效是网页设计中常见的...

    使用Vuejs构建的Carousel组件

    通过分析文件名`lukaszflorczak-vue-agile-3d89353`,我们可以推测这是开发者Lukasz Florczak创建的一个名为"vue-agile"的轮播组件,版本号可能是3d89353,这通常是一个Git仓库的提交ID,表示项目的某个具体版本。...

    一款增强的3D carousel控件

    标题 "一款增强的3D carousel控件" 暗示我们即将探讨的是一个专门用于创建3D旋转展示效果的UI组件。Carousel控件通常在网页或应用程序中用于展示多个项目,用户可以通过滚动或点击来浏览这些项目。在这个增强版本中...

    nativescript-carousel, NativeScript的简单,iOS,carousel组件.zip

    nativescript-carousel, NativeScript的简单,iOS,carousel组件 NativeScript carouselNativeScript的简单 carousel 组件。平台支持的版本 NativeViewiOS是的iOS 8.1 DKCarouselViewAndr

    jQuery OwlCarousel响应式插件列表图片滚动轮播

    jQuery OwlCarousel是一款流行的JavaScript库,专门用于创建响应式的图片轮播和列表滚动效果。这款插件以其灵活性、可定制性和出色的用户体验而受到开发者们的广泛欢迎。在本文中,我们将深入探讨jQuery OwlCarousel...

    用vue写的无缝轮播组件:carousel.vue

    这是我用vue写的无缝轮播组件 carousel.vue ,主要实现了以下几个功能:1,页面载入时自动轮播;2,当鼠标放在图上时停止轮播,鼠标移出时继续轮播;3,点击左侧箭头时,图片向右滑到下一张,点击右侧箭头时,图片向...

    react-native-snap-carousel,用于React Native的Swiper/Carousel组件,具有预览、多个布局、视差图像、对大量项目的性能处理和RTL支持。与android和ios兼容。.zip

    React Native Snap Carousel是一款高度可定制且功能丰富的滑动轮播组件,专为React Native应用程序设计。这个组件在标题中被提及,它提供了Swiper(滑动切换)和Carousel(轮播图)的功能,并且有着广泛的特性,如...

    PV3D做的Carousel3D例子

    Carousel3D是PV3D中的一个特定组件,它模仿了现实世界中旋转木马的效果,用于展示3D物体或者图像的旋转展示。这个组件可以用来创建动态的、视觉吸引力强的用户体验,比如产品展示、图片轮播或者其他需要3D旋转效果的...

    jQuery 3d Carousel轮播图插件Waterwheel-Carousel.zip

    jQuery 3D Carousel轮播图插件Waterwheel-Carousel是一个功能强大的JavaScript库,专为网页设计师和开发者设计,用于创建具有三维效果的旋转轮播图。这个插件基于流行的jQuery框架,允许用户轻松地在网页上实现动态...

    layui.carousel轮播组件实现移动端手势左右滑动效果

    layui.carousel轮播组件实现移动端手势左右滑动效果

    jQuery Carousel 3D 图片旋转显示插件 v1.1.rar

    总的来说,jQuery Carousel 3D 图片旋转显示插件是一款强大且易用的解决方案,它将3D效果融入传统的图片轮播组件,为网站带来现代感和互动性。无论你是前端开发者还是设计师,都能通过这个插件快速构建出引人入胜的...

    vue-carousel-3d:Vue Carousel 3D-适用于Vue.js的美观,灵活且受触摸支持的3D Carousel

    Vue轮播3D 该存储库已恢复运行。 我将尝试使其保持更新并偶尔合并合并请求。... 用法(本地) 使用导入将Carousel 3d包含到您的组件中: import { Carousel3d , Slide } from 'vue-carousel-3d' ;export default { ...

    react-3d-carousel

    "react-3d-carousel"是一个基于React库构建的3D轮播组件,它允许开发者在Web应用中创建具有视觉吸引力的3D旋转效果的图片或内容展示。React是Facebook开发的JavaScript库,用于构建用户界面,特别是单页应用程序。这...

    Carousel-开源3d,自定义路径动画

    Carousel是一款开源的3D动画库,专为实现自定义路径动画设计。在WPF(Windows Presentation Foundation)平台上,它提供了一种创新的方式来展示内容,通过3D旋转和平移效果,使得用户界面更加生动且引人入胜。让我们...

    jR3DCarousel是一款效果非常炫酷的3D旋转木马jQuery插件

    **jR3DCarousel:3D旋转木马jQuery插件详解** jR3DCarousel是一款优秀的JavaScript库,专为网页设计师和开发者提供了一种创新的方式来展示图像或内容,其核心特性在于其3D旋转木马效果。这款插件充分利用了jQuery的...

    Android Carousel源码

    在Android开发中,Carousel(旋转木马)是一种常见的UI组件,用于展示一组卡片或图片,通常以3D视角进行平滑滚动,为用户提供引人入胜的视觉体验。本项目"Android Carousel源码"提供了这样一个功能强大的3D展示效果...

Global site tag (gtag.js) - Google Analytics