`
gray888
  • 浏览: 530255 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

缓动导航

阅读更多

今天整理电脑看到这个效果,再重新练习了一遍。

先看效果:

 
新建一个flash名字随便了,大小588*350  :

1,把你要放的图片导到库里面 。
2,新建一个mc名字为mc1, 把刚才的图片拖进来,上对齐,左对齐 。
3,新建一个mc名字为color 用矩形工具拖个色条宽20 高350,然后再回到mc1新建一层,把color拖进来也是左对齐,上对齐 。
4,新建一层在mc1上写上要显示的文字 。
5,再在mc1上新建一层,加入一个20*350的按钮,实例名为btn 。
6,重复以上步骤把建5个mc, 名字分别为mc1-mc5 。
如图:
按此在新窗口浏览图片按此在新窗口浏览图片 
7,新建一个mc新建5个层把刚才m1-m5拖进来到分别的层上实例名分别为m0-m5 。
8,在第一帧上写上:

for (i=0; i<5; i++) {
 this["m"+i]._x = _root.my_qlX0[i];
 var btnNum = this["m"+i].btn;
 btnNum.Mnum = i;
 btnNum.onRollOver = function() {
  this._parent._parent.m1.MoveTo(0.200000, _root["my_qlX"+this.Mnum][1]);
  this._parent._parent.m2.MoveTo(0.200000, _root["my_qlX"+this.Mnum][2]);
  this._parent._parent.m3.MoveTo(0.200000, _root["my_qlX"+this.Mnum][3]);
  this._parent._parent.m4.MoveTo(0.200000, _root["my_qlX"+this.Mnum][4]);
 };
}

9,然后把这个mc拖到场景里面在第一帧写上:
MovieClip.prototype.smoothMove = function(sp, tx) {
 this._x = this._x+sp*(tx-this._x);//缓动
};
MovieClip.prototype.MoveTo = function(sp, sx) {
 this.age = 0;
 this.onEnterFrame = function() {
  if (this.age<30) {
   this.smoothMove(sp, sx);
  } else {
   delete onEnterFrame;
  }
  this.age++;
 };
};
//坐标控制
my_qlX0 = [0, 500,522,544,566];//[m1开始位置,m2在右边的位置,m3在右边的位置]
my_qlX1 = [0, 22,522,544,566];//当m2滑到左边事各m的位置
my_qlX2 = [0, 22,44,544,566];//当m2,m3滑到左边事各m的位置
my_qlX3 = [0, 22,44,66,566];//当m2,m3,m4滑到左边事各m的位置
my_qlX4 = [0, 22,44,66,88];//当m2,m3,m4,m5滑到左边事各m的位置

10,Ctrl+Enter测试下影片。
评论

相关推荐

    JS实现带缓动效果的导航菜单

    为了实现这样的缓动导航菜单,开发者需要理解JavaScript基础,掌握DOM操作和CSS动画原理。在实际开发中,可能还需要考虑浏览器兼容性问题,确保在不同的设备和浏览器上都能正常工作。同时,优化性能也很重要,避免...

    纯JS缓动函数

    1. UI过渡效果:在网页的导航菜单、模态框等元素中使用缓动函数,提升用户体验。 2. 游戏开发:角色移动、物体碰撞等动画效果的实现。 3. 数据可视化:数据图表的动态展示,使得数据变化更加直观。 总结,纯...

    用缓动类写成的flash 导航按钮

    在Flash动画设计中,缓动类(Easing Class)是一种常用的技术,用于创建平滑、自然的过渡效果,尤其在导航按钮的设计中,它可以增加用户的交互体验,使按钮的动态表现更加吸引人。本项目“用缓动类写成的flash 导航...

    jquery缓动火焰效果导航

    在本文中,我们将深入探讨如何使用jQuery实现一种独特的“缓动火焰效果导航”。这个效果能够为网站增添动态感,提高用户体验,使用户在浏览时感到更吸引人。我们将依次介绍CSS、图像处理、JavaScript(尤其是jQuery...

    jQuery宽屏左右缓动滚动图文焦点图代码

    **jQuery宽屏左右缓动滚动图文焦点图代码详解** 在网页设计中,视觉效果和用户体验是至关重要的元素。"jQuery宽屏左右缓动滚动图文焦点图"是一种常见且高效的展示方式,它允许用户通过平滑的动画效果在多个图像或...

    flash动画导航条鼠标滑过弹性动画展示二级菜单

    在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。...通过巧妙运用Flash的时间轴、关键帧、缓动函数以及ActionScript,可以创建出吸引用户的导航条交互效果,提升网站的整体体验。

    jQuery宽屏左右缓动焦点图.zip

    【jQuery宽屏左右缓动焦点图】是一种基于JavaScript库jQuery设计的网页元素,主要用于实现一种动态展示内容的视觉效果。这种焦点图通常用于网站的首页或者其他需要突出展示信息的区域,能够以美观的方式循环播放一...

    jQuery变形动画导航下拉菜单代码

    变形效果可能涉及到宽度、高度、边距等属性的变化,以及过渡时间、缓动函数等参数的设置。 为了保证动画的平滑性,还需要关注浏览器的兼容性和性能优化。例如,可以使用CSS3的`transition`属性配合jQuery的动画,以...

    导航背景颜色动画

    - **动画效果**:可以添加更多的参数来控制动画,如缓动函数(easing),完成回调函数(complete)等。 - **可变效果**:为了实现可变效果,你可以根据用户交互(如鼠标悬停、点击事件)或者定时器来触发不同的...

    仿flash动画效果网页导航

    缓动效果在Flash动画中非常常见,它让物体的运动看起来更加自然和流畅。在JavaScript中,可以使用缓动函数如EaseInOut、EaseIn或EaseOut来模拟这种效果。这些函数通常基于时间戳和速度变化来计算元素的位置,使得...

    js实现带缓动动画的导航栏效果

    在本文中,我们将探讨如何使用JavaScript(JS)来创建一个带有缓动动画的导航栏效果。缓动动画是一种平滑、自然的过渡效果,通常用于提高用户体验,使用户界面更加吸引人。以下是对示例代码的详细解释: 首先,HTML...

    左右布局的缓动Tab切换

    "左右布局的缓动Tab切换"是一种常见的交互设计模式,它为用户提供了一种直观且易于操作的方式来浏览不同的内容板块。这种设计通常应用于移动端的顶部导航栏,让用户能够轻松地在各个功能或内容之间进行切换。 **...

    CSS3弹性展开网站动画导航菜单特效.zip

    `,这将使所有属性在0.3秒内以缓动方式完成过渡。 动画(Animation)比过渡更强大,因为它可以控制整个动画序列,包括时间线、关键帧等。在导航菜单中,我们可以创建自定义动画,比如使用`@keyframes`定义一个从...

    jQuery宽屏左右缓动焦点图

    jQuery宽屏左右缓动焦点图是一种常见的网页设计元素,它为网站添加了视觉吸引力和动态交互性。在本文中,我们将深入探讨这个焦点图的工作原理、实现方式以及它所涉及的关键技术。 首先,jQuery是一个轻量级的...

    CSS3鼠标悬停动画下拉导航菜单代码

    这段代码设置了所有子菜单的过渡效果,当`all`属性被指定时,意味着所有可动画的属性都将过渡,`0.3s`是过渡时间,`ease`是缓动函数,提供了一个逐渐加速然后逐渐减速的效果。 为了使下拉菜单更具动态性,我们可以...

    jquery熔岩灯导航菜单动画效果导航条

    例如,可以设置动画时间、缓动函数(如linear、swing等)以及动画完成后的回调函数。此外,还可以使用`.stop()`方法来防止多个动画堆叠,确保每次鼠标移动时只执行一个动画。 除了基本的熔岩灯效果,还可以通过添加...

    jQuery仿qq浏览器动画切换导航效果

    7. **测试与调整**:确保在各种浏览器和设备上都能正常工作,根据需要调整动画速度、缓动函数等参数,以达到最佳视觉效果。 通过以上步骤,我们可以利用jQuery轻松实现QQ浏览器风格的动画切换导航,提升网站的用户...

    jquery模仿flash动画导航左右滑动效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个模仿Flash动画的导航栏,该导航栏具有左右滑动的效果。...在实际项目中,可以进一步优化和扩展这个效果,比如添加缓动函数、自动轮播和指示器等特性。

    jquery动态放大缩小标签导航

    4. **设置动画参数**:如持续时间、缓动函数(ease-in-out等),以控制动画的流畅性。 5. **确保动画执行顺序**:如果需要同时改变多个属性,可以将它们放在同一个`animate()`调用中,或者在动画完成后添加回调函数...

    easing动画运动效果.zip

    例如,线性(easeInOut)缓动就是元素以恒定速度运动,而easeIn(加速)会让元素在开始时缓慢,然后逐渐加速,easeOut(减速)则是相反,元素开始快速然后慢慢停止,easeInOutQuad则是一种常见的非线性缓动,元素在...

Global site tag (gtag.js) - Google Analytics