在这篇文章中先分析一个案例,然后实现一个类似Amazon或者DangDang上面的动画弹出菜单,谈谈如何利用Script.aculo.us的Effect开发自定义动画,先看看运行效果 http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/AmazonPopMenu.html

 

Script.aculo.us开发系列(四):动画弹出菜单的实现-开发自己的动画Effect.MoveAndResizeTo = Class.create();//Prototype中创建类的"招式"

这个例子是官方网站里提供的,总结一下,无非是重载一下构造函数,和自己实现update()方法.

去过Amazon或者DangDang的朋友一定记得那酷酷的弹出类别菜单,我可是很早就垂涎欲滴了,以前自己去实现过,很由难度,也看过他们的源代码,很晦涩,且非常长.但是看到上面的动画是否看到了些希望的曙光了.

仔细分析一下,在页面上会有一大一小的两个div,鼠标放在小的div上,就出现一个框,从小的div变到大的div,最后大的div显示出来,同时在鼠标离开这两个div的时候需要反着"放"这段动画.

 那段动画就是一个层应用上面的动画效果.下面只是用Prototype框架去封装它了,所以下篇文章的标题是Prototype封装的艺术

相关文章: