`
nianshi
  • 浏览: 416225 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

flex实现滑动显示隐藏效果

    博客分类:
  • Flex
阅读更多

鼠标划过的时候显示菜单栏 ,鼠标移开后隐藏菜单栏。比较常用的一种动画效果。附件是源代码。

大家多多交流

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Move effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " creationComplete="init()">

    <mx:Script>
        <![CDATA[
   import mx.controls.Alert;
   
   private function init():void{
    img.y=0-(img.height*0.90);//初始默认将百分之九十的图片隐藏起来。通过y轴的福坐标来设置

   }
   
   //当鼠标覆盖的时候 将图片显示出来
            private function moveMOverImage():void {
                myMove.end();
                myMove.yTo=0;
                myMove.play();
            }
           
            //鼠标移开的时候在将图片重新隐藏
            private function moveMOutImage():void {
                myMove.end();
                myMove.yTo=0-(img.height*0.90);
                myMove.play();
            }
           
           
      ]]>
    </mx:Script>

 

    <mx:Move id="myMove" target="{img}"  />

 

    <mx:Panel title="Move Effect Example" width="95%" height="95%"
        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">

 

        <mx:Canvas id="canvas" width="100%" height="100%" >

            <mx:Image id="img" source="@Embed(source='beijing.png')"   mouseOver="moveMOverImage();" mouseOut="moveMOutImage();" />

        </mx:Canvas>
   
    </mx:Panel>
</mx:Application>

分享到:
评论

相关推荐

    flex 滑动隐藏效果

    结合JavaScript,可以在达到某个条件时改变此属性,从而实现滑动显示或隐藏。 5. **flex-grow** 和 **flex-shrink**:这两个属性分别定义了Flex项目在剩余空间中的放大比例和在空间不足时的缩小比例。在滑动隐藏...

    flex 滑动隐藏.滑动出现的效果

    滑动出现的效果"是利用Flex布局来实现的一种交互式用户体验,常用于侧边栏、导航菜单或者好友列表等场景。下面将详细解释如何通过Flex布局实现这一效果,并探讨其在实际应用中的改进方法。 首先,我们需要了解Flex...

    Flex滑动面板,类似QQ隐藏效果

    5. **样式和皮肤**:为了使滑动面板看起来更像QQ的隐藏效果,我们可以定制组件的皮肤,如添加阴影效果、渐变背景等,这可以通过CSS样式或自定义Skin来完成。 6. **状态管理**:为了支持面板的不同状态(如展开、...

    flex翻书效果 flex翻书效果

    Flex翻书效果是一种在网页或应用中实现模拟真实书籍翻页动画的技术,它利用了CSS3中的Flexbox布局模型和一些动态效果来创造出逼真的翻页体验。在现代Web开发中,这种效果常用于电子书、杂志或者产品展示等场景,以...

    Flex开门,关门,翻转,效果

    TransitionManager提供了一系列预定义的过渡效果,如滑动、淡入淡出等,可以方便地应用于组件的显示和隐藏。此外,开发者也可以自定义动画,通过改变组件的宽度、高度、透明度等属性来模拟门的开启和关闭动作。 ...

    Flex GIS卷帘效果

    Flex GIS卷帘效果是一种在地理信息系统(GIS)中常见的交互方式,它允许用户通过类似卷帘的动作来展示或隐藏地图的某一层或多层,从而实现地图数据的动态切换和对比。这种效果通常用于地理信息的可视化,使得用户...

    用flex实现苹果样式的弹出菜单

    在Flex中,你可以使用`TweenLite`或`TweenMax`库来实现这些动画,比如淡入淡出、滑动效果等。将这些动画应用于菜单的显示和隐藏,提升用户体验。 6. **图标和图片**:`images`文件夹中的资源可以用于菜单项的图标...

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

    当鼠标悬停在图片上时,通过jQuery可以实现图片下方的文字信息上下滑动显示。这通常涉及到两个主要步骤:隐藏和显示文字信息。 1. 首先,我们需要在HTML中为每张图片的下方添加一个用于显示文字的容器,并设置初始...

    滑动菜单效果

    在CSS方面,我们可以使用transform属性来改变元素的位置,实现滑动效果。例如,我们可以为侧边栏设置初始的translateX值,使其处于隐藏状态。然后,通过JavaScript监听用户的触摸或鼠标事件,当触发滑动操作时,动态...

    slide 左右滑动面板

    这可能包括`display: flex`或者`position: absolute/fixed`来定位面板,以及设置适当的宽度和溢出属性来控制面板的显示和隐藏。在本例中,我们可能会使用一个容器元素来包裹所有的面板,以便它们可以左右滑动。 2. ...

    横向滑动代码

    2. CSS Grid:CSS Grid布局则适用于二维布局,通过设定`grid-template-columns`和`grid-auto-flow`属性,可以创建多列布局,结合JavaScript控制每一项的显示与隐藏,实现横向滑动。 3. Swiper.js:这是一个流行的...

    微信小程序实现滑动删除效果

    在微信小程序中实现滑动删除效果,通常涉及到手势识别、元素定位以及动态数据绑定等多个技术环节。以下将详细解析这个过程: 首先,微信小程序中不支持像Android那样的快速滑动事件,因此无法直接利用系统提供的...

    几个很不错的Flex特效

    实现滑动面板的关键在于理解如何使用Flex的滑动效果(SlideEffect)和布局管理器(Layout Manager)。 2. **渐变过渡(Gradient Transitions)**:在Flex中,可以通过颜色渐变来创建平滑的过渡效果,这在按钮、背景...

    flex仿qq右边弹出提示消息功能

    通过查看和学习这些文件,你可以深入了解如何在Flex中实现类似QQ的弹出消息功能,包括Flex组件的使用、动画效果的实现以及事件处理机制。通过实践和修改代码,你将能更好地掌握Flex开发技巧,并能够适应不同的项目...

    利用滑动门做的tab效果

    下面我们将深入探讨滑动门技术以及如何将其应用于实现Tab效果。 滑动门技术的基本原理是利用CSS的背景图像和边距属性,将一个元素的左右两侧分别设置为不同的背景图像,从而达到“滑动”效果。这种技术特别适用于...

    Flex特效包org

    而"org.efflex.viewStackEffects.*"则扩展了ViewStack的功能,添加了各种视觉效果,如淡入淡出、滑动、缩放等,使得在ViewStack中切换视图时能够呈现出丰富的动画效果,这些效果不仅限于简单的显示和隐藏,而是通过...

    jquery主页全屏滑动切换

    jQuery 实现滑动切换 现在使用jQuery编写JavaScript代码,监听菜单链接的点击事件,并实现全屏滑动切换: ```javascript $(document).ready(function() { // 当页面加载时,隐藏所有内容页,显示第一个页面 $('...

    flex effects

    这个效果在显示或隐藏组件时特别有用,可以为用户界面添加平滑的过渡。 3. **Move 效果**:`mx.effects.Move`类允许开发者控制组件的位置,使其在两个坐标点之间平滑移动。这在创建滑动菜单、抽屉式面板等交互元素...

    一款常用的网站导航切换(附有滑动条效果)

    为了实现滑动条效果,可以使用CSS的`:hover`伪类改变鼠标悬停时的样式,或者使用CSS动画平滑过渡。例如: ```css .nav-menu { display: flex; justify-content: space-between; } .nav-menu li { transition: ...

Global site tag (gtag.js) - Google Analytics