flex gallery / 产品展示

代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" creationComplete="photo()"><mx:Script><![CDATA[import mx.controls.Image;import mx.controls.Button;public var img:Array = [];public var urls:Array = [];public var buttons:Array = [];public var total:int = 4;public var currenIndex:int = 0;public var ttime:Timer;private function photo():void{               var iphoto:Array = ['assets/1.jpg','assets/2.jpg','assets/3.jpg','assets/4.jpg'];var iurl:Array = ['http://www.baidu.com','http://www.google.com','http://www.yahoo.com','http://www.msn.com'];for(var n:int = 0; n < total; n++){ var button:Button = new Button;button.width=30;button.height=15;button.setStyle("fontWeight","normal");button.setStyle("cornerRadius","0");button.setStyle("fontSize","9");button.setStyle("color","#FFFFFF");button.setStyle("backgroundColor","#FF0000");button.setStyle("fillColors",["#FF0000","#FF0000"]);button.setStyle("fillAlphas",[0.3, 0.3]);button.label = new String(n+1);  // 相当于 valuebutton.buttonMode = true;        // 手型button.addEventListener(MouseEvent.CLICK,selectImage);  // 添加行为buttons[n]=button;            ibtn.addChild(button);           // 添加元素var listImage:Image = new Image();listImage.x = 0;listImage.y = 0;listImage.source = iphoto[n];   // 相当于 srclistImage.toolTip = iphoto[n];  // 相当于 titlelistImage.width = frame.width;listImage.height = frame.height;listImage.visible = false;//根据当前时间随即选择4种切换效果之一var p:Number = (new Date()).getTime() % 4;var eff:String;switch(p) {case 0:eff = "fadeIn";break;case 1:eff = "myIris";break;case 2:eff = "aIris";break;case 3:eff = "aWipeLeft";break;default:eff = "myDissolve";}listImage.setStyle("showEffect",eff); listImage.buttonMode = true;listImage.addEventListener(MouseEvent.CLICK,gotoUrl);urls[n] = iurl[n];img[n] = listImage;frame.addChild(listImage);             }//设定图片切换按钮的位置ibtn.x = 330;ibtn.y = 320;              clickIndex(currenIndex);(buttons[currenIndex] as Button).setStyle("fontWeight","bold");(buttons[currenIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);//new一个timer控件，每隔2秒钟变换一次ttime = new Timer(3000,0);  ttime.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});ttime.start(); }private function clickIndex(i:int):void{(img[i] as Image).visible = false;frame.setChildIndex(img[i],img.length-1);(img[i] as Image).visible = true;currenIndex = i;               }private function autoPlay():void{          (buttons[currenIndex] as Button).setStyle("fontWeight","normal");    (buttons[currenIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);currenIndex ++ ;if (currenIndex >= img.length) {currenIndex = 0;}(buttons[currenIndex] as Button).setStyle("fontWeight","bold");(buttons[currenIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);          clickIndex(currenIndex);                }private function selectImage(event:MouseEvent):void {ttime.reset();ttime = new Timer(3000,0);  ttime.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});             ttime.start();var button:Button = Button(event.currentTarget);var index:Number = ibtn.getChildIndex(button);if (index == currenIndex) return;(buttons[currenIndex] as Button).setStyle("fontWeight","normal");    (buttons[currenIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);button.setStyle("fontWeight","bold");button.setStyle("fillAlphas",[1.0, 1.0]);clickIndex(index);}  private function gotoUrl(evt:MouseEvent):void{navigateToURL(new URLRequest(urls[currenIndex]), "_blank");  }]]></mx:Script><mx:Style>Button{cornerRadius: 12;creationCompleteEffect:Zoom;}</mx:Style><mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/><mx:Iris id="aIris"/><mx:Iris id="myIris" /><mx:WipeLeft id="aWipeLeft" /><mx:Dissolve id="myDissolve" color="black"/><mx:Canvas x="0" y="0" id="frame" width="500" height="364" horizontalScrollPolicy="off" verticalScrollPolicy="off"  useHandCursor="true"> </mx:Canvas>   <mx:HBox id="ibtn" horizontalAlign="right" verticalAlign="bottom"> </mx:HBox>
</mx:Application>

flex gallery / 产品展示相关推荐

苹果官网产品展示特效
给大家分享一个由原生JS实现的苹果官网产品展示特效,看起来很不错,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><head& ...
Swiper制作滑动型产品展示图
效果图: 前些日子见到了这种效果图,本来想着用js敲可是估计又要废掉大半天,再加上时间紧而且没必要,就看了看现成的轮子.然而网上的轮子貌似都是jquery插件,无奈,突然想起Swiper貌似也能做,于 ...
精致3D图片切换效果，最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator
文章作者:张健(Zhang Jonathan) 上一篇文章从产品展示页面谈谈Hybris的特有概念和设计结构我们讲解了Hybris一些特有的概念以及大体架构,并且介绍了Facade层里是如何定义D ...
模拟产品展示 Flash无法展示的追踪过程
鼠标滑过小图时,左侧前四张大图可以,但是最后那张大图无法展示: falsh产品展示需要通过参数传递,把关联产品id的图片get出来,如: http://192.168.8.166:90/categor ...
WEB产品展示Bootstrap4模板
简介: WEB产品展示Bootstrap4模板网盘下载地址: http://kekewangLuo.net/0N4HjUgSN4H0 图片:
业务展示类网站高保真原型模板库、企业品牌官网、公司业务介绍、产品展示及营销、首页模板、内页模板、单页模板、整站模板、导航、轮播、横幅、列表、客户、案例、页脚、动态面板、母版、页面事件、窗口函数
本作品是一套专为业务展示类网站而推出的原型模板库,适用于制作企业品牌官网.公司业务介绍.产品展示及营销等各类网站.作品中包含了符合目前主流展示类网站设计风格的丰富模板及素材,并以UI设计稿级别的高保真 ...
宽幅FLASH产品展示代码多图带左右显示按钮 - 图
科技类的网站用上这个可以很好的展示自己的产品,修改起来也很方便,直接修改一个XML文件就可以了,找了很久,终于被我从懒人图库那里给找到了,收藏下! 首先来看看这个宽幅FLASH产品展示的整体效果,相信 ...
线上3D产品展示的方式
因为疫情,很多地区不能线下举办发布会,一些企业为了保障用户在云端也能真切体验产品.促进成交,于是就找到了老子云负责产品的线上3D展示. 在技术交流过程中,经常聊到几个极具代表性的3D话题,今天分享给大 ...

flex gallery / 产品展示

flex gallery / 产品展示相关推荐

最新文章

热门文章