zoukankan      html  css  js  c++  java
  • 鼠标悬浮效果-串行效果和并行效果

    <?xml version="1.0" encoding="utf-8"?>
    <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"
                   minWidth="955" minHeight="600"
                   creationComplete="init()"
                   >
       <fx:Declarations>
           <s:Sequence id="effect" target="{boxes}">
               <s:Fade alphaFrom="{boxes.alpha}" alphaTo="1"/>
               <s:Scale scaleXTo="1" scaleXFrom="{boxes.scaleX}"
                        scaleYTo="1" scaleYFrom="{boxes.scaleY}"/>
           </s:Sequence>
       </fx:Declarations>
        <s:Group id="boxes" alpha=".2" x="20" y="20" scaleX=".5" scaleY=".5" rollOverEffect="{effect}">
            <s:Rect width="200" height="200">
                <s:fill>
                    <s:SolidColor color="black"/>
                </s:fill>
            </s:Rect>
            
        </s:Group>
    </s:Application> 
    View Code

     以上为串行效果,使用Sequence

    一下为并行效果,使用Parallel

    <?xml version="1.0" encoding="utf-8"?>
    <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"
                   minWidth="955" minHeight="600"
                   creationComplete="init()"
                   >
       <fx:Declarations>
           <s:Parallel id="effect" target="{boxes}">
               <s:Fade alphaFrom="{boxes.alpha}" alphaTo="1"/>
               <s:Scale scaleXTo="1" scaleXFrom="{boxes.scaleX}"
                        scaleYTo="1" scaleYFrom="{boxes.scaleY}"/>
           </s:Parallel>
       </fx:Declarations>
        <s:Group id="boxes" alpha=".2" x="20" y="20" scaleX=".5" scaleY=".5" rollOverEffect="{effect}">
            <s:Rect width="200" height="200">
                <s:fill>
                    <s:SolidColor color="black"/>
                </s:fill>
            </s:Rect>
            
        </s:Group>
    </s:Application> 
    View Code
    <?xml version="1.0" encoding="utf-8"?>
    <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"
                   minWidth="955" minHeight="600"
                   creationComplete="init()"
                   >
       <fx:Declarations>
           <s:Parallel id="effect" target="{boxes}">
               <s:Fade alphaFrom="{boxes.alpha}" alphaTo="1"/>
               <s:Scale scaleXTo="1" scaleXFrom="{boxes.scaleX}"
                        scaleYTo="1" scaleYFrom="{boxes.scaleY}"/>
           </s:Parallel>
       </fx:Declarations>
        <s:Group id="boxes" alpha=".2" x="20" y="20" scaleX=".5" scaleY=".5" rollOverEffect="{effect}">
            <s:Rect width="200" height="200">
                <s:fill>
                    <s:SolidColor color="black"/>
                </s:fill>
            </s:Rect>
            
        </s:Group>
    </s:Application> 
    View Code
  • 相关阅读:
    大型项目前端架构浅谈
    图标使用新姿势- react 按需引用 svg 的实现
    为什么json 不能使用 int64类型
    SSL证书对SEO网站优有什么影响?使用HTTPS的SEO优势
    web安全测试必须注意的五个方面
    在小程序中实现 Mixins 方案
    网站web前端常见的优化措施
    前端 HTML空格的六种方式
    如何正确选型,React Native 还是 Native?
    CSS3 渐变(Gradients)
  • 原文地址:https://www.cnblogs.com/zhugexiaobei/p/3244608.html
Copyright © 2011-2022 走看看