鼠标划过的时候显示菜单栏 ,鼠标移开后隐藏菜单栏。比较常用的一种动画效果。附件是源代码。
大家多多交流
<?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>
分享到:
相关推荐
结合JavaScript,可以在达到某个条件时改变此属性,从而实现滑动显示或隐藏。 5. **flex-grow** 和 **flex-shrink**:这两个属性分别定义了Flex项目在剩余空间中的放大比例和在空间不足时的缩小比例。在滑动隐藏...
滑动出现的效果"是利用Flex布局来实现的一种交互式用户体验,常用于侧边栏、导航菜单或者好友列表等场景。下面将详细解释如何通过Flex布局实现这一效果,并探讨其在实际应用中的改进方法。 首先,我们需要了解Flex...
5. **样式和皮肤**:为了使滑动面板看起来更像QQ的隐藏效果,我们可以定制组件的皮肤,如添加阴影效果、渐变背景等,这可以通过CSS样式或自定义Skin来完成。 6. **状态管理**:为了支持面板的不同状态(如展开、...
Flex翻书效果是一种在网页或应用中实现模拟真实书籍翻页动画的技术,它利用了CSS3中的Flexbox布局模型和一些动态效果来创造出逼真的翻页体验。在现代Web开发中,这种效果常用于电子书、杂志或者产品展示等场景,以...
TransitionManager提供了一系列预定义的过渡效果,如滑动、淡入淡出等,可以方便地应用于组件的显示和隐藏。此外,开发者也可以自定义动画,通过改变组件的宽度、高度、透明度等属性来模拟门的开启和关闭动作。 ...
Flex GIS卷帘效果是一种在地理信息系统(GIS)中常见的交互方式,它允许用户通过类似卷帘的动作来展示或隐藏地图的某一层或多层,从而实现地图数据的动态切换和对比。这种效果通常用于地理信息的可视化,使得用户...
在Flex中,你可以使用`TweenLite`或`TweenMax`库来实现这些动画,比如淡入淡出、滑动效果等。将这些动画应用于菜单的显示和隐藏,提升用户体验。 6. **图标和图片**:`images`文件夹中的资源可以用于菜单项的图标...
当鼠标悬停在图片上时,通过jQuery可以实现图片下方的文字信息上下滑动显示。这通常涉及到两个主要步骤:隐藏和显示文字信息。 1. 首先,我们需要在HTML中为每张图片的下方添加一个用于显示文字的容器,并设置初始...
在CSS方面,我们可以使用transform属性来改变元素的位置,实现滑动效果。例如,我们可以为侧边栏设置初始的translateX值,使其处于隐藏状态。然后,通过JavaScript监听用户的触摸或鼠标事件,当触发滑动操作时,动态...
这可能包括`display: flex`或者`position: absolute/fixed`来定位面板,以及设置适当的宽度和溢出属性来控制面板的显示和隐藏。在本例中,我们可能会使用一个容器元素来包裹所有的面板,以便它们可以左右滑动。 2. ...
2. CSS Grid:CSS Grid布局则适用于二维布局,通过设定`grid-template-columns`和`grid-auto-flow`属性,可以创建多列布局,结合JavaScript控制每一项的显示与隐藏,实现横向滑动。 3. Swiper.js:这是一个流行的...
在微信小程序中实现滑动删除效果,通常涉及到手势识别、元素定位以及动态数据绑定等多个技术环节。以下将详细解析这个过程: 首先,微信小程序中不支持像Android那样的快速滑动事件,因此无法直接利用系统提供的...
实现滑动面板的关键在于理解如何使用Flex的滑动效果(SlideEffect)和布局管理器(Layout Manager)。 2. **渐变过渡(Gradient Transitions)**:在Flex中,可以通过颜色渐变来创建平滑的过渡效果,这在按钮、背景...
通过查看和学习这些文件,你可以深入了解如何在Flex中实现类似QQ的弹出消息功能,包括Flex组件的使用、动画效果的实现以及事件处理机制。通过实践和修改代码,你将能更好地掌握Flex开发技巧,并能够适应不同的项目...
下面我们将深入探讨滑动门技术以及如何将其应用于实现Tab效果。 滑动门技术的基本原理是利用CSS的背景图像和边距属性,将一个元素的左右两侧分别设置为不同的背景图像,从而达到“滑动”效果。这种技术特别适用于...
而"org.efflex.viewStackEffects.*"则扩展了ViewStack的功能,添加了各种视觉效果,如淡入淡出、滑动、缩放等,使得在ViewStack中切换视图时能够呈现出丰富的动画效果,这些效果不仅限于简单的显示和隐藏,而是通过...
jQuery 实现滑动切换 现在使用jQuery编写JavaScript代码,监听菜单链接的点击事件,并实现全屏滑动切换: ```javascript $(document).ready(function() { // 当页面加载时,隐藏所有内容页,显示第一个页面 $('...
这个效果在显示或隐藏组件时特别有用,可以为用户界面添加平滑的过渡。 3. **Move 效果**:`mx.effects.Move`类允许开发者控制组件的位置,使其在两个坐标点之间平滑移动。这在创建滑动菜单、抽屉式面板等交互元素...
为了实现滑动条效果,可以使用CSS的`:hover`伪类改变鼠标悬停时的样式,或者使用CSS动画平滑过渡。例如: ```css .nav-menu { display: flex; justify-content: space-between; } .nav-menu li { transition: ...