做网站|网站建设,就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载!

JQuery创建 3d 立方体的插件 jCube.js
来源:易助科技网浏览量:3收藏

简介

只需添加一行 js 脚本就可以创建出一个可以拖动旋转的 3d 立方体。 

配置项:

墙纸宽度 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 }
}


使用

1.  引入文件

<script src="jquery.min.js"></script>  
<script src="../dist/jCube.min.js"></script>


2.  HTML

<div class="room"></div>


3.  调用

<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>


相关链接 

Gitee 地址:https://gitee.com/mirrors/jcube

在线演示 :https://justinzzc.github.io/jRoom/demo/test3.html