jCube創(chuàng)建 3d 立方體的 jQuery 插件
jCube
只需添加一行js腳本就可以創(chuàng)建出一個可以拖動旋轉的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 }
}
詳細請查看
評論
圖片
表情