JSCube是一个立方体插件,完全用JS和CSS实现,支持所有主流浏览器。通过它可以创建一个立方体,并将6个HTML元素贴在其面上,支持旋转和缩放。
与其他类似特效不同,本程序可以把任意HTML元素贴在立方体上,而不仅仅局限图片,所以无论是flash还是canvas,都是无法做到的。
当前最新版本:1.7。更新日志:
1.0:基本立方体的模型。
1.1:支持任意角度更灵活的旋转。
1.2:支持缩放。
1.3:增强贴面的对象,修复部分bug。
1.4:CSS3的出现,不再是ie only了!
1.5:修正FireFox的bug。
1.6:支持面动态亮度效果。
1.7:支持ie9/ie10的GPU加速。
脚本引用
创建立方体
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 = 0Cube.FACE_RIGHT = 1Cube.FACE_BACK = 2Cube.FACE_LEFT = 3Cube.FACE_TOP = 4Cube.FACE_BOTTOM = 5顾名思义,立方体前后左右上下面的ID编号。
用于setFace的第一个参数。