Tag: script.aculo.us预览模式: 普通 | 列表

[Javascript][Prototype]滑动导航(SlideNav)

一个常用的滑动导航效果,与原来做的电子相册有点类似,不过现在这个功能单一,通用性高。

示例:
http://www.kxbd.com/mylab/081120SlideNav/

查看更多...

Tags: Javascript Prototype script.aculo.us

分类:代码编程 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1141
(一) (二)

这两天做网站,需要使用个动画折叠菜单,翻出原来写的来看了看,发现当初写的还是有不周到的地方,比如说,如果不是所有导航都有子菜单,原来写的那个就不能直接使用了。

于是将Accordion类重新写了一遍,重新优化了JS的内部结构,独立出几个方法,包括有showWhich(),hideWhich(),toggleWhich(),toggleAll()等。

查看更多...

Tags: Javascript Prototype script.aculo.us

分类:代码编程 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1282

[Javascript][Prototype]电子相册(slideNavigation)

这几天写的一个更强大的电子相册,包括有一个滑动导航条。类的名称也就叫slideNavigation。

不过在IE下,slider的执行效率不算完美。

示例 | Demo:
http://www.kxbd.com/mylab/080807slidenavigation/

查看更多...

Tags: Javascript Prototype script.aculo.us

分类:代码编程 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 1424
这两天写的一个比较强大的图片轮换类,原理很简单,类似于原来写的自动轮换选项卡效果,不过新写的这个类要更健壮,功能更多。

类的构造函数包括两个参数,一个是DOM的ID,一个是杂项设定,为一个可选的对象,包括鼠标事件(event),动画变化时间(dur),轮换时间(interval),是否已经有导航(hasNav),图片转换的动画类型(type)。图片转换的动画类型包括有:0:alpha变换,为默认,1:从左上角缩放,2:居中缩放,3:左右滑动,4:上下滑动。当然还可以更多类似的动画效果,原理大都与以有的相似。

同时提供了一些常用公有方法,开始(start),停止(stop),开关(toggle),上一张(prev),下一张(next),改变转换时间(setInterval),从已经有的方法来说,这个类已经具有了做一个图片相册的常有功能,剩下的事只是前台的表现了。

查看更多...

Tags: Javascript Prototype script.aculo.us

分类:代码编程 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 1863

[Javascript][Prototype]动画折叠菜单(Accordion)

(一) (二)

这两天写的一个用途非常广泛的动画折叠菜单(Accordion),构造函数有两个参数,一个是DOM的ID,一个为可选杂项的设定,是一个对象,包括有鼠标事件(event),是否只展开一个(isOne),动画的时间(dur),展开的方向(type)。

当设定为能全部展开时,还提供了两个公有方法,一个是全部展开(showAll),一个是全部关闭(hideAll)。

查看更多...

Tags: Javascript Prototype script.aculo.us

分类:代码编程 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1339
第一节 第二节 第三节 第四节 第五节

这篇日志应该是下拉导航菜单系列的最后一节了。在这一节里,我实现的是一个多级动画下拉菜单,由于要实现多级动画效果,这次的Javascript和前几节的Javascript有很大的不同,同时前端XHTML也与原来不一样。

要实现动画效果,就必须给每个下拉菜单都加上一个遮罩层,同时也降低了XHTML的可读性,不过与其他的多级下拉菜单相比,他们大多使用JS来生成菜单,而我这个脚本仍然保持了结构层与行为层的完全分离。当然,就我个人而言,如果要使前端动画效果更漂亮,我更倾向于使用FLASH来实现。

查看更多...

Tags: Javascript Prototype script.aculo.us

分类:代码编程 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1107