`
那夜温柔低调
  • 浏览: 21270 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex 图片样例

    博客分类:
  • flex
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="853" height="437"
backgroundColor="#090909" creationComplete="complete()" >
<mx:Panel x="57" y="108" width="506" height="279" layout="absolute" horizontalAlign="center">
<mx:Image x="75" y="10" width="100%" height="100%" id="bimg" horizontalAlign="center"/>
</mx:Panel>

<mx:Move id="imgm" target="img1"/>
<mx:HBox x="0" y="10" width="100%" height="69" horizontalScrollPolicy="off"  id="hx">
<mx:Image width="80" height="66" source="img/2.jpg" mouseMove="show(event)"  verticalAlign="middle" id="img1"/>
<mx:Image width="80" height="60" source="img/2.jpg" mouseMove="show(event)"/>
<mx:Image width="80" height="60" source="img/2.jpg" mouseMove="show(event)"/>
<mx:Image width="80" height="60" source="img/2.jpg" mouseMove="show(event)"/>
<mx:Image width="80" height="60" source="img/2.jpg" mouseMove="show(event)"/>
<mx:Image width="80" height="60" source="img/2.jpg" mouseMove="show(event)"/>
<mx:Image width="80" height="60" source="img/2.jpg" mouseMove="show(event)"/>
<mx:Image width="80" height="62" source="img/2.jpg" mouseMove="show(event)" verticalAlign="middle"/>
</mx:HBox>


<mx:Move id="move_up" target="{tt}"/>
<mx:Panel width="250" height="200" layout="absolute" title="Anouncement" 
  fontSize="13" horizontalCenter="269" verticalCenter="-2">
<mx:Canvas id="cs" width="100%" height="100%" left="0" top="0" 
   verticalScrollPolicy="off" mouseOver="move_pause()" mouseOut="move_resume()">
<mx:Text id="tt" width="94%" horizontalCenter="0"
text="Ntt.cc was created br Minidxer in January of 2008 as a site dedicated to the prolification of Macromedia/Adobe Flex and JavaScript/Ajax." verticalCenter="0">
</mx:Text>
</mx:Canvas>
</mx:Panel>


<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Image;
//显示图片
private function show(e:Event):void{
var s:String=e.currentTarget.source;
this.bimg.source=s;
}

//字体向上滚动
private function complete():void
{
move_up.yFrom = cs.height - 6;  
move_up.yTo = 0 - tt.height + 6;
move_up.repeatCount = 0; //loop
move_up.repeatDelay = 0; //loop time
move_up.duration = 6000; //the time of scroll once
move_up.play();
////////////////////////

}
//鼠标放入暂停
private function move_pause():void
{
move_up.pause();  //pause
}
//鼠标离开重新滚动
private function move_resume():void
{
move_up.resume(); //start from the pause position
}

]]>
</mx:Script>
</mx:Application>

分享到:
评论

相关推荐

    html css样例

    2. **属性**:元素可以有属性,如`&lt;img&gt;`标签的`src`属性用于指定图片路径,`alt`属性提供替代文本。 3. **文本格式化**:`&lt;b&gt;`(粗体)、`&lt;i&gt;`(斜体)、`&lt;u&gt;`(下划线)等标签用于文本样式。 4. **链接**:`&lt;a&gt;`...

    css布局样例源代码

    `)或使用Flexbox (`display: flex;`)和Grid (`display: grid;`)布局可以实现水平排列。 4. **图片加文字布局**:在图片下方或上方添加文字是常见的内容展示方式。可以通过CSS的相对定位(`position: relative;`)和...

    瀑布流布局图片展示css模板_瀑布流 图片 展示 外贸 博客 图片博客.zip

    6. **样例代码**: 以下是一个简单的HTML结构示例,结合CSS Flexbox实现瀑布流布局: ```html &lt;div class="item"&gt;&lt;img src="image1.jpg" alt="Image 1"&gt; &lt;div class="item"&gt;&lt;img src="image2.jpg" alt="Image...

    jquery新闻图片九宫格布局鼠标悬停图片上下滑动显示文字信息

    实现九宫格布局,我们可以使用CSS的`display: grid`或者`display: flex`属性。例如,使用CSS Grid可以这样设置: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; ...

    AIR2.0 调用应用程序 实例 本机通讯 实例 样例 测试可行

    在本文中,我们将深入探讨Adobe Integrated Runtime(AIR)2.0中的一个重要功能——调用本地应用程序,以及如何通过实例和样例实现与本机的通信。AIR 2.0为开发者提供了一种强大的方式,允许Flex或ActionScript应用...

    news-grid:样例新闻网站

    - 使用Flexbox,我们可以通过设置`display: flex`和`flex-wrap: wrap`属性,让新闻条目自适应地在一行内排列,当空间不足时自动换行。 - CSS Grid则允许更精细的二维布局控制,通过定义行和列,我们可以轻松地创建出...

    js手风琴效果

    `display: flex`或`display: grid`能让子元素在容器内水平或垂直分布,并且可以通过`justify-content`或`align-items`属性调整对齐方式。 至于标签中的"jq图片效果",虽然描述中没有明确提及图片,但可以推断手风琴...

    时间线功能模块设计概要.doc

    - 开发工具:使用Adobe Flex3及以上版本,它是一个强大的富互联网应用程序框架,适合构建交互性强的UI。 - UI设计:需完成界面设计的定稿工作,确保视觉吸引力和功能性。 - 数据通信:采用JSON数据源或AMF3接口与...

    课程表小程序demo

    10. **样式和布局**:理解WXSS中的盒模型、定位、弹性布局(Flex布局)等,能帮助你构建出美观且适应不同屏幕尺寸的界面。 在"课程表2018(上)"这个文件中,可能包含了该小程序的源代码,包括WXML、WXSS和...

    web页面设计规范

    - 提供具体实例和技术细节,如CSS样式表样例、常见页面布局示例等。 通过上述内容可以看出,《Web页面设计规范》全面覆盖了Web页面设计的关键要素,从页面框架、布局、字体、边距等方面制定了详细的规则,并针对...

    纯css3实现宠物小鸡实例代码

    CSS3是一种用来增强网页样式和布局的样式表技术,它提供了诸多新的特性,比如动画、过渡、变换、阴影等,使得页面设计更加生动和丰富多彩,同时减少了传统JavaScript以及图片等资源的使用,降低了页面的复杂性和加载...

    drink

    标题"drink"和描述"喝"可能是在指代一个与饮料相关的网页设计项目或者一个与饮品有关的CSS样例。在这个项目中,"drink-main"可能是主样式表文件,它包含了整个页面或组件的主要CSS规则。 首先,我们需要理解CSS的...

    Maven权威指南 很精典的学习教程,比ANT更好用

    下载本章样例 4.2. 定义Simple Weather项目 4.2.1. Yahoo! Weather RSS 4.3. 创建Simple Weather项目 4.4. 定制项目信息 4.5. 添加新的依赖 4.6. Simple Weather源码 4.7. 添加资源 4.8. 运行Simple ...

    样本网站

    `&lt;img&gt;`标签插入图片,需指定`src`属性为图片路径,`alt`属性提供替代文字。`&lt;a&gt;`标签创建超链接,`href`属性指向链接目标。 【HTML列表】 `&lt;ul&gt;`和`&lt;ol&gt;`分别用于无序列表和有序列表,`&lt;li&gt;`标签定义列表项。`&lt;dl&gt;...

    it-begin

    3. **布局模式**:CSS提供流体布局(使用百分比宽度)、网格布局(`display: grid`)和Flexbox(弹性布局,`display: flex`)等,帮助开发者实现灵活的页面布局。 4. **响应式设计**:使用媒体查询(`@media`)可以...

    CurriculumVitae

    - `display`属性可改变元素的显示方式,如设置为`inline-block`或`flex`进行布局。 - `grid`或`flexbox`布局可以方便地创建响应式设计,适应不同屏幕尺寸。 在"CurriculumVitae-master"这个文件夹中,可能包含了...

Global site tag (gtag.js) - Google Analytics