Tag: Mootools预览模式: 普通 | 列表

[Javascript][Mootools]IntoTheSky JS版本

在用AS写了上个Flash小游戏之后,我闲来无事,决定用Javascript将这个游戏重写一下,而使用的JS类库就是Mootools,因为Mootools在OOP式开发上提代了大量支持,尤其是Class.Extras中的Events类,让事件驱动开发成为可能。

由于JS和AS的同宗同源,把AS改成JS,并没有改动多少代码,如果对比这个游戏的JS和AS源码,就会发现游戏里的各个类结构基本是一样的。最主要的变化在于,将FLASH中的显示对象(DisplayObject)改成DOM对象显示,因此改写游戏并没有花费我多少时间。

最终游戏效果在IE下执行效率不好,在FF/Chrome下还可以,基本上和Flash相差不大,由于JS在图形处理上并不如Flash一般强大,所以游戏中的元素只是使用是最基本的DIV来意思一下。

查看更多...

Tags: Javascript Mootools 游戏开发

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

[Javascript][Mootools]跟随页面滚动的浮动层

这个东西经常用来做为浮动广告,不过也可以做成一个浮动的菜单条,有利于浏览者快速跳转。

跟随页面滚动的原理是,将浮动层的定位坐标“top”值设置为页面的滚动高度即可。

通过可选参数来设定动画移动的值,以及浮动元素离顶端的距离。还提供了一个属性isActive来设定是否跟随滚动,一个方法toggleActive来开关跟随效果。

查看更多...

Tags: Javascript Mootools

分类:代码编程 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1178
在已有的Tabs类基础上,还可以继续往下扩展,如,加上对Tabs的拖动排序功能等,不过我不想继续了。

最后这篇是通过CSS的设定,让Tabs类表现出更多的用途,比如实现折叠菜单,折叠内容,轮换图片等。

详细应用可见示例:Tabs 扩展应用

Tags: Javascript Mootools

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

[Javascript][Vector3D类]旋转效果(四)

使用Vector3D类来完成鼠标移动旋转元素,元素将同时绕着X轴和Y轴旋转,看多了眼很花。

用Vector和Vector3D完成的这些效果执行效率都不高,而且视觉效果也不算好,写了这些东西出来,只是为了好玩而已,另外也可以用来熟悉如何将常见的视觉效果用代码来实现。

旋转效果示例

查看更多...

Tags: Javascript Mootools Vector3D

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

[Javascript][Vector3D类]旋转效果(三)

这节将使用Vector3D类来完成旋转效果(一)的效果,两节的代码逻辑保持一致,大多数代码也相同,不过这节采用了Vector3D类来完成,实现了三维视觉的旋转效果。

另外,再加上了是绕X轴还是Y轴旋转的判断,实现了两种不同的旋转方式。

旋转效果示例一

旋转效果示例二

查看更多...

Tags: Javascript Mootools Vector3D

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

[Javascript][Vector类]旋转效果(二)

这个旋转效果是我在看到一个FLASH后想到用Javascript来实现下,于是便有了这个效果,通过鼠标来移动来旋转圆环,旋转的方向与鼠标移动的方向相反。相较于Flash,我这个JS版的效果与效率都大打折扣,纯粹是我想看看能否通过Vector类来完成这些东西罢了。

旋转效果(二)与旋转效果(一)相比,有好几个相同的方法,可以通过Mootools.js里Class类的extend或者implement方法来消除重复的代码编写,我这里偷懒,写成了两个独立的类。

旋转效果示例

查看更多...

Tags: Javascript Mootools Vector

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