`

Flex Slide Show

    博客分类:
  • Flex
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<!--created:Aug 27, 2010 file:BorderContainerDemo2.mxml  author:Michael -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   viewSourceURL="srcview/index.html" backgroundColor="0">
	<s:states>
		<s:State name="normal"/>
		<s:State name="b1"/>
		<s:State name="b2"/>
		<s:State name="b3"/>
	</s:states>
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle"
							horizontalAlign="center"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			protected function bordercontainer_clickHandler(event:MouseEvent):void
			{

				this.currentState=event.currentTarget.id;

			}

			protected function hg_creationCompleteHandler(event:FlexEvent):void
			{
				for (var i:int; i < this.hg.numElements; i++)
				{
					BorderContainer(this.hg.getElementAt(i)).addEventListener(MouseEvent.CLICK, bordercontainer_clickHandler);
				}
			}
		]]>
	</fx:Script>

	<s:HGroup gap="0"
			  id="hg"
			  creationComplete="hg_creationCompleteHandler(event)">

		<s:BorderContainer width="50"
						   width.b1="400"
						   height="300"
						   cornerRadius="5"
						   backgroundImage="@Embed(source='images/menu1.png')"
						   backgroundImageFillMode="clip"
						   id="b1"
						   resizeEffect="Resize"/>

		<s:BorderContainer width="50"
						   width.b2="400"
						   height="300"
						   cornerRadius="5"
						   backgroundImage="@Embed(source='images/menu2.png')"
						   backgroundImageFillMode="clip"
						   id="b2"
						   resizeEffect="Resize"/>

		<s:BorderContainer width="400"
						   width.b1="50"
						   width.b2="50"
						   height="300"
						   cornerRadius="5"
						   backgroundImage="@Embed(source='images/menu3.png')"
						   backgroundImageFillMode="clip"
						   id="b3"
						   resizeEffect="Resize"/>
	</s:HGroup>

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

相关推荐

    flex 自动弹出窗口(右下角弹出,右上角弹出)

    Flex提供了`Fade`、`Slide`等效果类,可以通过`Effect`对象添加到弹出窗口上。例如,使用`Slide`效果让窗口从右下角平滑滑入: ```actionscript var slideIn:Slide = new Slide(); slideIn.properties.direction = ...

    Flex调用xml通过DataGrid遍历简单示例

    slides = event.result.album.slide; } private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString, event.fault.faultCode); } ]]&gt; url=...

    jQuery slide焦点图片滚动插件仿京东商城首页焦点图片滚动轮播

    slides.eq(slideIndex).show(); if (slideIndex == slides.length - 1) slideIndex = 0; else slideIndex++; setTimeout(showSlides, 3000); // 每3秒切换一次 } $('.next').click(function() { showSlides...

    右侧按钮自动滑动图片切换特效.zip

    $images.hide().eq(slideIndex).show(); } $('#prev').on('click', function() { moveSlide('prev'); }); $('#next').on('click', function() { moveSlide('next'); }); }); ``` 以上代码中,`moveSlide`...

    SlideBar实现动态菜单

    ElementUI提供了响应式布局的支持,通过`flex`布局或者媒体查询,我们可以确保SlideBar在不同设备上都能良好显示。 6. **事件监听与交互**:为了实现动态加载,我们需要监听用户的登录、角色切换等事件,并根据这些...

    新浪网图片展示幻灯片CSS代码

    &lt;img src="images/show.jpg" alt="幻灯片1"&gt; &lt;!-- 更多幻灯片... --&gt; ``` 接下来,使用CSS来控制幻灯片的布局和样式。我们可以设置容器的宽度、高度,以及幻灯片的定位方式。例如,如果想要幻灯片水平滑动,...

    Flash Sample

    Audio: Load sounds Control the playback of three different MP3 files. Feature highlight: Load images Select and view different images in this slide show. Feature highlight: ...

    ionic css图片解读

    图片可能展示了Flexbox属性(如 `flex-direction`、`align-items` 和 `justify-content`)如何工作,帮助理解如何在Ionic中创建对齐和流式布局。 7. **组件状态管理**: 图片可能还涵盖了组件的不同状态,如激活...

    微信小程序实现单列下拉菜单效果

    动画类控制了动画的存在与否,并且示例中定义了一个名为`slide500ms`的动画,该动画可能包含了展开和收起的动画效果,这里使用了500毫秒的时长。但具体的动画效果和细节并没有在提供的内容中给出,可能需要在其他...

Global site tag (gtag.js) - Google Analytics