分享一个HTML立方体插件 JSCube v1.7
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加速。
脚本引用
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://files.cnblogs.com/index-html/Cube.js"></script>
创建立方体
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的第一个参数。
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦