jCube <a href="https://github.com/justinzzc/jCube#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"></a>基本使用方法<a href="https://github.com/justinzzc/jCube#%E9%BB%98%E8%AE%A4%E9%85%8 介绍
jCube
只需添加一行js脚本就可以创建出一个可以拖动旋转的3d立方体。
用法
基本使用方法
<head> <script src="jquery.min.js"></script> <script src="../dist/jCube.min.js"></script> </head> <body> ... <div class="room"> </div> ... <script> $(function(){ $('.room').jCube({ wallWidth:635, wallHeight:664, cube:{ back:'a/back.jpg', front:'a/front.jpg', left:'a/left.jpg', right:'a/right.jpg', top:'#90c0c0', bottom:'#9f5d3b' }, perspectiveRate:1.21 }); }); </script> </body>
配置项
-
可用配置项
-
墙纸宽度 wallWidth , 墙纸高度 wallHeight
-
立方体背景配置 cube
-
墙面附加物配置 attach
-
立方体class名称 cubeClass
-
视角调整比例 perspectiveRate
-
默认配置
{
wallWidth: 300,
wallHeight: 300,
cube: {
front: 'white',
back: 'white',
left: '#d3d3d3',
right: '#d3d3d3',
top: '#f3f3f3',
bottom: '#ddd' },
attach: {
front: '',
back: '',
left: '',
right: '',
top: '',
bottom: '' },
cubeClass: 'room-cube',
perspectiveRate: 1,
viewLimit: {
xMin: -15,
xMax: 15,
yMin: -360,
yMax: 360 }
}
详细请查看
jCube <a href="https://github.com/justinzzc/jCube#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"></a>基本使用方法<a href="https://github.com/justinzzc/jCube#%E9%BB%98%E8%AE%A4%E9%85%8 官网
https://justinzzc.github.io/jCube/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
