快捷搜索:

HTML立方体插件——JSCube v1.6.1<BR>脚本引用<BR><br

JSCube是一个立方体插件,完全用JS和CSS实现。经由过程它可以创建一个立方体,并将6个HTML元素贴在其面上,支持扭转和缩放。

当前最新版本:1.6.1。支持面动态亮度效果。

脚本引用

http://www.fengfly.com/demo/Cube/Cube1.6.1.js">>

创建立方体

JSCube创建很简单:

var oCube = new Cube();

然后设置立方体的面半径长度:

oCube.setRadius(100);

即可显示出来。此时你看到的是一个正方形,而不是立方体,由于这是初始默认的角度,这个正方形便是其正面。

接着经由过程rotate措施扭转,其他几个面就显示出来了。 然后用setFace措施,将HTML元素贴在指定的面上。

详细看措施列表阐明。

工具措施

setLocate(cx, cy)

页面中定位立方体。

(cx, cy)为立方体中间点坐标

setFace(id, elem)

立方体谅面。

id: 立方体面编号

elem: 页面中的HTML元素

setRadius(r)

设置立方体面的半径长度。

rotate(angleX, angleY, angleZ)

扭转立方体。

angleX: 绕X轴扭转响应角度,下同。

setLight(enable)

开启/关闭动态光亮效果。

静态属性

Cube.FACE_FRONT = 0

Cube.FACE_RIGHT = 1

Cube.FACE_BACK = 2

Cube.FACE_LEFT = 3

Cube.FACE_TOP = 4

Cube.FACE_BOTTOM = 5

顾名思义,立方体前后阁下高低面的ID编号。

用于setFace的第一个参数。

DEMO

GoogleCube:

http://www.fengfly.com/demo/Cube

您可能还会对下面的文章感兴趣: