建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery创建 3d 立方体的插件 jCube.js

来源:易助科技网浏览量:5收藏

简介

JQuery创建 3d 立方体的插件 jCube.js,用法简单方便。

配置项:

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