今天整理电脑看到这个效果,再重新练习了一遍。
先看效果:
新建一个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测试下影片。
分享到:
相关推荐
为了实现这样的缓动导航菜单,开发者需要理解JavaScript基础,掌握DOM操作和CSS动画原理。在实际开发中,可能还需要考虑浏览器兼容性问题,确保在不同的设备和浏览器上都能正常工作。同时,优化性能也很重要,避免...
1. UI过渡效果:在网页的导航菜单、模态框等元素中使用缓动函数,提升用户体验。 2. 游戏开发:角色移动、物体碰撞等动画效果的实现。 3. 数据可视化:数据图表的动态展示,使得数据变化更加直观。 总结,纯...
在Flash动画设计中,缓动类(Easing Class)是一种常用的技术,用于创建平滑、自然的过渡效果,尤其在导航按钮的设计中,它可以增加用户的交互体验,使按钮的动态表现更加吸引人。本项目“用缓动类写成的flash 导航...
在本文中,我们将深入探讨如何使用jQuery实现一种独特的“缓动火焰效果导航”。这个效果能够为网站增添动态感,提高用户体验,使用户在浏览时感到更吸引人。我们将依次介绍CSS、图像处理、JavaScript(尤其是jQuery...
**jQuery宽屏左右缓动滚动图文焦点图代码详解** 在网页设计中,视觉效果和用户体验是至关重要的元素。"jQuery宽屏左右缓动滚动图文焦点图"是一种常见且高效的展示方式,它允许用户通过平滑的动画效果在多个图像或...
在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。...通过巧妙运用Flash的时间轴、关键帧、缓动函数以及ActionScript,可以创建出吸引用户的导航条交互效果,提升网站的整体体验。
【jQuery宽屏左右缓动焦点图】是一种基于JavaScript库jQuery设计的网页元素,主要用于实现一种动态展示内容的视觉效果。这种焦点图通常用于网站的首页或者其他需要突出展示信息的区域,能够以美观的方式循环播放一...
变形效果可能涉及到宽度、高度、边距等属性的变化,以及过渡时间、缓动函数等参数的设置。 为了保证动画的平滑性,还需要关注浏览器的兼容性和性能优化。例如,可以使用CSS3的`transition`属性配合jQuery的动画,以...
- **动画效果**:可以添加更多的参数来控制动画,如缓动函数(easing),完成回调函数(complete)等。 - **可变效果**:为了实现可变效果,你可以根据用户交互(如鼠标悬停、点击事件)或者定时器来触发不同的...
缓动效果在Flash动画中非常常见,它让物体的运动看起来更加自然和流畅。在JavaScript中,可以使用缓动函数如EaseInOut、EaseIn或EaseOut来模拟这种效果。这些函数通常基于时间戳和速度变化来计算元素的位置,使得...
在本文中,我们将探讨如何使用JavaScript(JS)来创建一个带有缓动动画的导航栏效果。缓动动画是一种平滑、自然的过渡效果,通常用于提高用户体验,使用户界面更加吸引人。以下是对示例代码的详细解释: 首先,HTML...
"左右布局的缓动Tab切换"是一种常见的交互设计模式,它为用户提供了一种直观且易于操作的方式来浏览不同的内容板块。这种设计通常应用于移动端的顶部导航栏,让用户能够轻松地在各个功能或内容之间进行切换。 **...
`,这将使所有属性在0.3秒内以缓动方式完成过渡。 动画(Animation)比过渡更强大,因为它可以控制整个动画序列,包括时间线、关键帧等。在导航菜单中,我们可以创建自定义动画,比如使用`@keyframes`定义一个从...
jQuery宽屏左右缓动焦点图是一种常见的网页设计元素,它为网站添加了视觉吸引力和动态交互性。在本文中,我们将深入探讨这个焦点图的工作原理、实现方式以及它所涉及的关键技术。 首先,jQuery是一个轻量级的...
这段代码设置了所有子菜单的过渡效果,当`all`属性被指定时,意味着所有可动画的属性都将过渡,`0.3s`是过渡时间,`ease`是缓动函数,提供了一个逐渐加速然后逐渐减速的效果。 为了使下拉菜单更具动态性,我们可以...
例如,可以设置动画时间、缓动函数(如linear、swing等)以及动画完成后的回调函数。此外,还可以使用`.stop()`方法来防止多个动画堆叠,确保每次鼠标移动时只执行一个动画。 除了基本的熔岩灯效果,还可以通过添加...
7. **测试与调整**:确保在各种浏览器和设备上都能正常工作,根据需要调整动画速度、缓动函数等参数,以达到最佳视觉效果。 通过以上步骤,我们可以利用jQuery轻松实现QQ浏览器风格的动画切换导航,提升网站的用户...
在本文中,我们将深入探讨如何使用jQuery来实现一个模仿Flash动画的导航栏,该导航栏具有左右滑动的效果。...在实际项目中,可以进一步优化和扩展这个效果,比如添加缓动函数、自动轮播和指示器等特性。
4. **设置动画参数**:如持续时间、缓动函数(ease-in-out等),以控制动画的流畅性。 5. **确保动画执行顺序**:如果需要同时改变多个属性,可以将它们放在同一个`animate()`调用中,或者在动画完成后添加回调函数...
例如,线性(easeInOut)缓动就是元素以恒定速度运动,而easeIn(加速)会让元素在开始时缓慢,然后逐渐加速,easeOut(减速)则是相反,元素开始快速然后慢慢停止,easeInOutQuad则是一种常见的非线性缓动,元素在...