前段时间flex项目用到了图片交互的,整理一下,以备忘记把!
FLEX3
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="created();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
var images : ArrayCollection = new ArrayCollection();
var tickInterval : int;
private function created() : void
{
images.addItem("http://www.blogcdn.com/green.autoblog.com/media/2010/06/tesla-future-products.jpg");
images.addItem("http://www.blogcdn.com/www.autoblog.com/media/2010/06/lotuselisescrgbspecialedition-630.jpg");
images.addItem("http://www.blogcdn.com/www.autoblog.com/media/2010/06/mercedes-benz-sls-amg-e-cell-prototype-doors-open-2.jpg");
images.addItem("http://www.blogcdn.com/cn.autoblog.com/media/2010/06/coolshow.jpg");
images.addItem("http://www.blogcdn.com/www.autoblog.com/media/2010/06/dbs16-copy.jpg");
tickInterval = setInterval(changeImage, 5000);
viewstack1.selectedIndex = 0;
}
private function changeImage() : void
{
if (viewstack1.selectedIndex < viewstack1.getChildren().length - 1)
{
viewstack1.selectedIndex ++;
}
else
{
viewstack1.selectedIndex = 0;
}
}
]]>
</mx:Script>
<mx:Canvas>
<mx:ViewStack x="0" y="0" id="viewstack1" width="439" height="259">
<mx:Repeater id="stackRepeater" dataProvider="{images}">
<mx:Canvas label="{stackRepeater.currentIndex + 1}" width="100%" height="100%" showEffect="Fade" hideEffect="Fade">
<mx:Image source="{stackRepeater.currentItem}" width="439" height="259" horizontalAlign="center" verticalAlign="middle" />
</mx:Canvas>
</mx:Repeater>
</mx:ViewStack>
<mx:ToggleButtonBar bottom="0" dataProvider="viewstack1" right="0" styleName="rotator">
</mx:ToggleButtonBar>
</mx:Canvas>
</mx:Application>
分享到:
相关推荐
图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 多张图片交换显示渐变图片代码js 特效 多张图片交换显示渐变图片代码js 特效 多张图片交换显示渐变图片代码js 特效 多张图片交换显示渐变图片...
本主题聚焦于一个具体的JS应用:使用原生JavaScript实现图片在页面上的随机交换位置以及点击拖动图片换位的功能。这种技术常用于创建互动式的照片墙或图像展示应用。 首先,我们要理解如何在HTML中添加图片元素。...
**图片交换懒加载技术详解** 在网页设计中,图片往往是占据资源最多的元素之一,大量图片的加载会极大地影响页面的加载速度,进而影响用户的浏览体验。"图片交换懒加载"是一种优化网页性能的策略,它旨在提高网页的...
在图片交换位置的逻辑中,我们需要维护一个图片的列表,记录每个图片的原始索引和当前显示的位置。当拖动结束后,根据图片的新位置,我们可以更新列表中的顺序。如果多个图片同时在移动,还需要处理好碰撞检测,确保...
在IT行业中,图片交换和幻灯片特效是两个重要的视觉呈现技术,广泛应用于网页设计、演示文稿制作、数字媒体展示等领域。这两种技术能够提升用户体验,使内容更加生动有趣。 首先,我们来深入理解“图片交换”。图片...
本实例“jQuery 平滑图片交换实例 变彩图为黑白”聚焦于利用jQuery实现一种平滑的图片交换效果,同时将彩色图片转换为黑白,提升用户体验并增添视觉效果。 在网页开发中,图片交换通常是通过点击或鼠标悬停等事件来...
【ImageReady页面图片交换教程】 ImageReady是一款专为网页制作设计的图像编辑软件,与Photoshop捆绑销售,尽管Photoshop功能强大,但ImageReady在处理网页动态效果,尤其是页面图片交换方面具有独特优势。本文主要...
"PECS图片交换系统" PECS图片交换系统是一种专门为自闭症儿童设计的语言沟通法,通过循序渐进的训练阶段、分门别类的图画及句子条,协助自闭症儿童或其他有社交沟通障碍的儿童观察和体验沟通的过程,从而建立实用、...
《分析功能沟通训练和图片交换沟通系统对自闭症儿童问题行为的影响》 自闭症儿童常常面临沟通难题,这可能导致一系列问题行为的出现。功能沟通训练(Functional Communication Training, FCT)和图片交换沟通系统...
"jquery图片交换"这个主题是关于利用jQuery实现图片的动态位置交换,常见于产品列表或者轮播图等场景,使得用户可以方便地调整图片顺序或展示效果。这种功能尤其适用于电商平台,以便用户按需排列产品展示顺序,同时...
原生js鼠标拖拽图片交换位置效果代码.rar
标题中的"pc端图片批量上传,可拖动图片交换位置"是一个典型的Web应用功能,它涉及到前端技术,尤其是JavaScript和jQuery库的运用。这个功能的主要目的是让用户能够在个人计算机上选择多张图片,并通过网页进行上传...
这次我们来分享一款非常实用的JS插件,它可以很方便地帮你实现在网页上拖拽图片并交换...和其他的拖拽插件不同,当两张图片交换时,将会出现弹动的动画特效。并且会改变被交换图片的背景颜色,以标识该图片被交换过。
本文将深入探讨“jQuery图片拖拽交换位置插件”的核心知识点,包括jQuery的基本概念、拖放功能的实现原理以及如何利用CSS和JavaScript优化图片交换效果。 首先,jQuery是一个轻量级的库,它的主要目标是使...
- 在实现过程中,需要进行充分的测试,确保在不同情况下,如快速拖动、多图片交换等场景下,功能的稳定性和正确性。 以上就是使用JavaScript实现图片拖拽交换位置功能的主要步骤和技术要点。理解并掌握这些知识点...
在图片交换位置时,可以使用`ObjectAnimator`或`ValueAnimator`来实现过渡动画。 7. **性能优化**:在处理大量图片时,可能需要考虑性能优化。例如,使用Bitmap的复用池来减少内存占用,或者使用异步加载策略来避免...
标题中的“CSS鼠标悬停菜单 图片交换技术实现”指的是使用CSS来设计一个动态效果的菜单,当鼠标悬停在菜单项上时,通过改变背景图片来实现视觉上的交互变化。这种技术通常用于提高用户体验,使得用户能更直观地识别...
任意鼠标悬停在四周的一个图片上,当前图片立即与中间的图片交换位置 注意:图片交换过程中,即动画执行过程中,鼠标再次悬停在别的图片位置上的时候,动画不会被执行 使用方法: 1、将css样式引入到你...
"批量上传图片"、"拖动上传"以及"分块上传"是提高用户体验和优化服务器性能的关键技术。以下是对这些概念的详细解释: 1. 批量上传图片:批量上传允许用户一次性选择多个文件进行上传,而不需要逐个点击上传。这极...
网页中的幻灯片效果是一种常见的用户体验设计,它允许用户通过在屏幕内滑动来查看一组连续的图片或内容。这种效果通常用于展示产品、服务、新闻更新或任何其他需要序列展示的信息。实现这一效果,我们可以利用HTML、...