flex做的一个实用的广告滚动效果

来源：互联网发布：lte网络优化工程师初级编辑：程序博客网时间：2024/05/21 02:51

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[

            import mx.effects.easing.Bounce;
            [Bindable]
            private var dp:Array=["asset/1.jpg","asset/2.jpg","asset/3.jpg","asset/1.jpg","asset/2.jpg","asset/3.jpg"];

            private function playImg():void{
                wlLeft.play();
            }
            private var bigZoomCount:int=3;

            private function overHanlder(event:MouseEvent):void{
                overImg.source=event.currentTarget.source;
            }
            private function oneclickHanlder(event:MouseEvent):void{
                if(bigZoomCount>0){
                    bigZoomCount--;
                    big.zoomHeightTo=(3-bigZoomCount)*0.2+1;
                    //trace(big.zoomHeightTo);
                    big.zoomWidthTo=big.zoomHeightTo;
                    big.play();
                }
            }

            private function doubleClickHanlder(event:MouseEvent):void{
                if(bigZoomCount<3){
                    bigZoomCount++;
                    small.zoomHeightTo=(3-bigZoomCount)*0.2+1;
                    //trace(small.zoomHeightTo);
                    small.zoomWidthTo=small.zoomHeightTo;
                    small.play();

                }
            }

        private function setImgCanToLocalPoint():void{

        }

        ]]>
    </mx:Script>

    <mx:Style>
        Canvas{
            borderColor:"red";
            borderStyle:"solid";
            boderThickness:"3";
        }
    </mx:Style>
    <mx:Move id="wlLeft" target="{canContainer}" xFrom="{scorllBox.x+scorllBox.width+6}"
        xTo="{scorllBox.x-6-6*110}" repeatCount="0" repeatDelay="0" duration="{6*2000}"/>
    <mx:Parallel id="durSeq">
            <mx:Resize duration="300" easingFunction="Bounce.easeOut"/>
        <mx:Sequence>
            <mx:Blur blurXFrom="0" blurXTo="20" blurYFrom="0" blurYTo="20" duration="300" easingFunction="Bounce.easeOut"/>
            <mx:Blur blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" duration="300" easingFunction="Bounce.easeOut"/>
        </mx:Sequence>
    </mx:Parallel>

    <mx:Zoom id="big" target="{imgCan}"/>
    <mx:Zoom id="small" target="{imgCan}"/>

    <mx:Canvas id="scorllBox" width="600" height="100" x="30" y="30"
        verticalScrollPolicy="off" horizontalScrollPolicy="off">
        <mx:HBox id="canContainer" width="100%" height="100%">
        <mx:Repeater id="rp" dataProvider="{dp}">
            <mx:Canvas width="100" height="100">
                <mx:Image width="100%" height="100%" source="{rp.currentItem}"
                    rollOverEffect="{durSeq}" mouseOver="overHanlder(event);" />
            </mx:Canvas>
        </mx:Repeater>
        </mx:HBox>
    </mx:Canvas>
    <mx:HBox>
    <mx:Button label="play" click="playImg();" x="200" y="200"/>
    <mx:Button label="big" click="oneclickHanlder(event);" x="200" y="200"/>
    <mx:Button label="small" click="doubleClickHanlder(event);" x="200" y="200"/>
    </mx:HBox>
    <mx:Canvas id="imgCan"   x="300" y="300" borderColor="#cc0033" cornerRadius="18"
        borderStyle="solid" borderThickness="5" verticalScrollPolicy="off" horizontalScrollPolicy="off"
        width="300" height="300" doubleClickEnabled="true" dropShadowEnabled="true" dropShadowColor="black" shadowDirection="right" shadowDistance="10"
        click="oneclickHanlder(event);"
        doubleClick="doubleClickHanlder(event);">
        <mx:Image id="overImg" width="100%" height="100%"/>
    </mx:Canvas>

</mx:Application>

转自：http://hi.baidu.com/woaidelphi/blog/item/f20fd86d0e9ee6f342169434.html