基于CSS3实现三维视图展示功能
2016-11-29 10:32
337 查看
注：基于CSS3和Jquery实现三维视图展示，根据自己需求可进行相应修改，由于IE对CSS3支持有限，所以此三维视图不支持IE浏览器。仅供参考，如有雷同，纯属巧合。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>三维展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.body_all{
width:100%;
}
.body_right{
width:18%;
float:left;
}
.body_left{
width:80%;
float:left;
}
.stage{
perspective: 800px;
/*初始视角*/
perspective-origin:50% 50%;
}
.container-box{
width: 300px;
height:300px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
transition:5s;
/*旋转基准点*/
transform-origin:center center 150px;
/*Mozilla内核浏览器：firefox3.5+*/
-moz-transform-origin: center center 150px;
/*Webkit内核浏览器：Safari and Chrome*/
-webkit-transform-origin: center center 150px;
/*Opera*/
-o-transform-origin: center center 150px ;
/*IE9*/
-ms-transform-origin: center center 150px;
/*W3C标准*/
transform-origin: center center 150px ;
}
.container-box .side-bottom{
position: absolute;
width: 300px;
height: 240px;
border:1px solid #000000;
text-align: center;
line-height: 240px;
}
.container-box .side-right{
position: absolute;
width: 240px;
height: 420px;
border:1px solid #000000;
text-align: center;
line-height: 420px;
}
.container-box .side-back{
position: absolute;
width: 300px;
height: 420px;
border:1px solid #000000;
text-align: center;
line-height: 420px;
}
.container-box .side-layer{
position: absolute;
width: 300px;
height: 420px;
line-height: 420px;
border:1px solid #000000;
text-align: center;
}
.right{left:302px;
/*围绕Y轴 */
-moz-transform:rotateY(-90deg) ;
-webkit-transform:rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform:rotateY(-90deg);
transform: rotateY(-90deg);
/*旋转基点--X */
-moz-transform-origin: left;
-webkit-transform-origin: left;
-o-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left ;
}
.bottom{top:422px;
/*围绕X轴*/
-moz-transform:rotateX(90deg) ;
-webkit-transform:rotateX(90deg);
-o-transform: rotateX(90deg);
-ms-transform:rotateX(90deg);
transform: rotateX(90deg);
/*旋转基点--Y*/
-moz-transform-origin: top;
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top ;
}
.back{z-index:1;}
.layer{
/*top:120px;*/
/*围绕X轴*/
-moz-transform:rotateX(90deg) ;
-webkit-transform:rotateX(90deg);
-o-transform: rotateX(90deg);
-ms-transform:rotateX(90deg);
transform: rotateX(90deg);
/*旋转基点--Y*/
-moz-transform-origin: top;
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top ;
}
.container:hover{
-moz-transform:rotateX(-30deg);
-webkit-transform:rotateX(-30deg);
-o-transform: rotateX(-30deg);
-ms-transform:rotateX(-30deg);
transform: rotateX(-30deg);
}
.blank{
width:39px;
height:39px;
line-height:40px;
float:left;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
background-color:#E5E5E5;
}
.blank_fill{
width:39px;
height:39px;
line-height:40px;
float:left;
4000
border-right:1px solid #000000;
border-bottom:1px solid #000000;
}
.content{
width:100%;
float:left;
border:1px solid black;
border-radius:5px;
margin-bottom:20px;
}
.color_line{
width:100%;
height:20px;
margin-top:10px;
}
.line_text_left{
width:40px;
height:40px;
line-height:40px;
text-align:left;
float:left;
}
.line_text_right{
width:40px;
height:40px;
line-height:40px;
float:left;
}
.operation_line{
width:100%;
height:55px;
text-align:center;
}
.icon{
background: url(play1.png) no-repeat; /*url为png图片的路径*/
/*width和line-height分别对应每个小图标的宽和高*/
width: 55px;
height:53px;
display: inline-block;
}
.icon-left{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -3px -67px;/*对应小图标的坐标*/
}
.icon-right{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -148px -67px;/*对应小图标的坐标*/
}
.icon-top{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -73px -3px;/*对应小图标的坐标*/
}
.icon-bottom{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -73px -140px;/*对应小图标的坐标*/
}
.icon-ok{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -73px -70px;/*对应小图标的坐标*/
}
.icon-no{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -147px -3px;/*对应小图标的坐标*/
}
.button{
border:none;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="body_all">
<div class="body_left">
<div class="stage">
<div class="container-box" id="container">
<!-- back begin-->
<div class="side-back back" id="back_line">
</div>
<!-- back begin-->
<!-- right begin-->
<div class="side-right right" id="right_line">
</div>
<!-- right end-->
<!-- bottom begin-->
<div class="side-bottom bottom" id="bottom_line">
</div>
<!-- bottom end-->
</div>
</div>
</div>
<div class="body_right">
<div class="content" id="content">
</div>
<div class="content" id="console">
</div>
<div class="content" id="operation">
<div class="color_line" style="text-align:center; border-bottom:1px solid black;">显示旋转</div>
<div class="operation_line">
<input type="button" class="button icon icon-top" onclick="rotate('x',30)" >
</div>
<div class="operation_line">
<input type="button" class="button icon icon-left" onclick="rotate('z',-30)" >
<input type="button" id="contr" class="button icon icon-no" onclick="run(this)" >
<input type="button" class="button icon icon-right" onclick="rotate('z',30)" >
</div>
<div class="operation_line">
<input type="button" class="button icon icon-bottom" onclick="rotate('x',-30)" >
</div>
</div>
</div>
</div>
<script type="text/javascript" charset='utf-8'>
var degXs=0;
var degYs=0;
var timeout = false; //启动及关闭按钮
function rotate(type,degs){
timeout = true;
$("#contr").attr('class','button icon icon-no');
if(type=='z'){
degYs=(degs+degYs)%360;
}
if(type=='x'){
degXs=(degs+degXs)%360;
}
document.getElementById('container').style.transform='rotateX('+degXs+'deg) rotateY('+degYs+'deg)';
}
//var degs = 0;
function run(data){
if($(data).attr('class') =='button icon icon-no'){
$(data).attr('class','button icon icon-ok');
timeout = false;
}else{
$(data).attr('class','button icon icon-no');
timeout = true;
};
aaa();
}
var flg = false;
function aaa(){
if(timeout) return;
runy();
setTimeout(aaa,1000); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒
//setInterval (runy(), 1000);
function runy(){
//degYs+=15;
if(!flg){
degYs+=15;
if(degYs>90){
flg=true;
}
}else{
degYs-=15;
if(degYs<-90){
flg = false;
}
}
document.getElementById('container').style.transform='rotateY('+degYs+'deg) rotateX('+degXs+'deg)';
}
}
var rows,cols,lay; //行，列，层
var blank_size=40; //小方格大小
var back_bg=$('#back_line');
var right_bg=$('#right_line');
var bottom_bg= $('#bottom_line');
var container =$('#container');
var consoleCon = $('#console');
var colorarr=['#00FF00','#EEEE00','#FF7F50','#FF3030'];
var namearr=['0℃~10℃ ','10℃~20℃ ','20℃~30℃ ','30℃~50℃ '];
var data="11.0 11.1 11.2 11.3 11.4 11.5 11.6 12.0 12.1 12.2 12.3 12.4 12.5 12.6 13.0 13.1 13.2 13.3 13.4 13.5 13.6 14.0 14.1 14.2 14.3 14.4 14.5 14.6 15.0 15.1 15.2 15.3 15.4 15.5 15.6 21.0 21.1 21.2 21.3 21.4 21.5 21.6 22.0 22.1 22.2 22.3 22.4 22.5
22.6 23.0 23.1 23.2 23.3 23.4 23.5 23.6 24.0 24.1 24.2 24.3 24.4 24.5 24.6 25.0 25.1 25.2 25.3 25.4 25.5 25.6 31.0 31.1 31.2 31.3 31.4 31.5 31.6 32.0 32.1 32.2 32.3 32.4 32.5 32.6 33.0 33.1 33.2 33.3 33.4 33.5 33.6 34.0 34.1 34.2 34.3 34.4 34.5 34.6 35.0 35.1
35.2 35.3 35.4 35.5 35.6 41.0 41.1 41.2 41.3 41.4 41.5 41.6 42.0 42.1 42.2 42.3 42.4 42.5 42.6 43.0 43.1 43.2 43.3 43.4 43.5 43.6 44.0 44.1 44.2 44.3 44.4 44.5 44.6 45.0 45.1 45.2 45.3 45.4 45.5 45.6";
var arr = data.split(" ");
function drowpanel(colorarr,namearr){
var results="<div class='color_line' style='text-align:center;border-bottom:1px solid black;'>温度参照示图</div>";
for(var i=0;i<colorarr.length;i++){
results+="<div class='color_line'>";
results+="<div style='width:50%; height:20px;display:inline; float:left; text-align:right;'>"+namearr[i]+"</div>";
results+="<div style='width:30%; height:20px;background-color:"+colorarr[i]+";display:inline;float:left;'></div></div>";
}
results+="<div class='color_line'></div>";
$("#content").append(results);
}
initcontainer(5,7,4);
drowpanel(colorarr,namearr);
//初始化侧面，线条，坐标
function initcontainer(rows,cols,lay){
lay++;
var widths= cols*blank_size;
var heights = rows*blank_size;
var zHeights = lay*blank_size;
back_bg.css("height",zHeights).css("width",widths).css("line-height",zHeights);
right_bg.css("height",zHeights).css("width",heights).css("left",widths+2).css("line-height",zHeights);
bottom_bg.css("height",heights).css("width",widths).css("top",zHeights+2).css("line-height",heights);
drow_bg_blank(bottom_bg,rows*cols,widths,heights);
drow_bg_blank(right_bg,rows*lay,heights,zHeights);
drow_bg_blank(back_bg,lay*cols,widths,zHeights);
drow_bottom_x(bottom_bg,cols,widths,heights);
drow_top_x(back_bg,cols,widths,heights);
drow_bottom_y(bottom_bg,rows,widths,heights);
drow_top_y(right_bg,rows,widths,heights);
drow_right_z(right_bg,lay,zHeights,heights);
drow_left_z(back_bg,lay,zHeights,heights);
drow_data(lay,widths,heights,rows,cols);
}
//侧面线条，bg_con：容器，countblank：方格改书，divwidth：宽，divheight：高
function drow_bg_blank(bg_con,countblank,divwidth,divheight){
var results ="<div stype='width:"+divwidth+";height:"+divheight+";'>";
for(var i=0;i<countblank;i++){
results+="<div class='blank'></div>";
}
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//底部X轴
function drow_bottom_x(bg_con,cols,wid,hei){
var results ="<div style='width:"+wid+"px;height:"+blank_size+"px;position:absolute;top:"+hei+"px;left:-"+blank_size/6+"px;'>";
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_left'>";
results+=i;
results+="</div>"
}
results+="<div class='line_text_left'>X</div>"
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//顶部X轴
function drow_top_x(bg_con,cols,wid,hei){
var results ="<div style='width:"+wid+"px;height:"+blank_size+"px;position:absolute;top:-"+blank_size+"px;left:-"+blank_size/6+"px;'>";
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_left'>";
results+=i;
results+="</div>"
}
results+="<div class='line_text_left'>X</div>"
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//底部Y轴
function drow_bottom_y(bg_con,cols,wid,hei){
var results ="<div style='width:"+blank_size+"px;height:"+hei+"px;position:absolute;left:-"+blank_size+"px;top:"+blank_size/3+"px;'>";
results+="<div class='line_text_right'>Y</div>"
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_right'>";
results+=cols-2-i;
results+="</div>"
}
b864
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//顶部Y轴
function drow_top_y(bg_con,cols,wid,hei){
var results ="<div style='width:"+hei+"px;height:"+blank_size+"px;position:absolute;top:-"+blank_size+"px;left:"+blank_size/3+"px;'>";
results+="<div class='line_text_right'>Y</div>"
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_right'>";
results+=cols-2-i;
results+="</div>"
}
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//右侧Z轴
function drow_right_z(bg_con,cols,wid,hei){
var results ="<div style='width:"+blank_size+"px;height:"+wid+"px;position:absolute;left:"+hei+"px;top:"+blank_size/3+"px;'>";
results+="<div class='line_text_right'>Z</div>"
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_right'>";
results+=cols-2-i;
results+="</div>"
}
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//右侧Z轴
function drow_left_z(bg_con,cols,wid,hei){
var results ="<div style='width:"+blank_size+"px;height:"+wid+"px;position:absolute;left:-"+blank_size+"px;top:"+blank_size/3+"px;'>";
results+="<div class='line_text_right'>Z</div>"
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_right'>";
results+=cols-2-i;
results+="</div>"
}
results+="</div>";
bg_con.append(results);
}
function drow_data(lay,wid,hei,rows,cols){
var resu ="<div class='color_line' style='text-align:center;border-bottom:1px solid black;'>层显控制</div>";
for(var i=0;i<lay-1;i++){
drow_data_lay(i+1,lay-i-1,wid,hei,rows,cols);
resu+="<input type='radio' name='radioname' onclick='showdata("+(i+1)+")'>"
resu+="第 "+(i+1)+" 层<br>";
}
//输出按钮
consoleCon.append(resu);
}
//画层
function drow_data_lay(lay_h,lay,wid,hei,rows,cols){
var results="<div class='side-layer layer' id='layer_"+lay_h+"' style='height:"+hei+"px;width:"+wid+"px;line-height:"+hei+"px;top:"+lay*blank_size+"px;'>";
//results+=lay_h;
results+="<div style='height:"+hei+";,width:"+wid+";'>";
for(var i=0;i<rows*cols;i++){
var num = arr[((lay-1)*rows*cols+i)];
var colors;
if(num<=10){
colors=colorarr[0];
}else if(num>10 && num<=20){
colors=colorarr[1];
}else if(num>20 && num<=30){
colors=colorarr[2];
}else{
colors=colorarr[3];
}
results+="<div class='blank_fill' style='background-color:"+colors+"'>"+num+"</div>";
}
results+="</div>";
container.append(results)
}
function drow_data_content(results,datacount,wid,hei){
}
//控制层显示
function showdata(layid){
$('.layer').hide();
$('#layer_'+layid).show();
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>三维展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.body_all{
width:100%;
}
.body_right{
width:18%;
float:left;
}
.body_left{
width:80%;
float:left;
}
.stage{
perspective: 800px;
/*初始视角*/
perspective-origin:50% 50%;
}
.container-box{
width: 300px;
height:300px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
transition:5s;
/*旋转基准点*/
transform-origin:center center 150px;
/*Mozilla内核浏览器：firefox3.5+*/
-moz-transform-origin: center center 150px;
/*Webkit内核浏览器：Safari and Chrome*/
-webkit-transform-origin: center center 150px;
/*Opera*/
-o-transform-origin: center center 150px ;
/*IE9*/
-ms-transform-origin: center center 150px;
/*W3C标准*/
transform-origin: center center 150px ;
}
.container-box .side-bottom{
position: absolute;
width: 300px;
height: 240px;
border:1px solid #000000;
text-align: center;
line-height: 240px;
}
.container-box .side-right{
position: absolute;
width: 240px;
height: 420px;
border:1px solid #000000;
text-align: center;
line-height: 420px;
}
.container-box .side-back{
position: absolute;
width: 300px;
height: 420px;
border:1px solid #000000;
text-align: center;
line-height: 420px;
}
.container-box .side-layer{
position: absolute;
width: 300px;
height: 420px;
line-height: 420px;
border:1px solid #000000;
text-align: center;
}
.right{left:302px;
/*围绕Y轴 */
-moz-transform:rotateY(-90deg) ;
-webkit-transform:rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform:rotateY(-90deg);
transform: rotateY(-90deg);
/*旋转基点--X */
-moz-transform-origin: left;
-webkit-transform-origin: left;
-o-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left ;
}
.bottom{top:422px;
/*围绕X轴*/
-moz-transform:rotateX(90deg) ;
-webkit-transform:rotateX(90deg);
-o-transform: rotateX(90deg);
-ms-transform:rotateX(90deg);
transform: rotateX(90deg);
/*旋转基点--Y*/
-moz-transform-origin: top;
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top ;
}
.back{z-index:1;}
.layer{
/*top:120px;*/
/*围绕X轴*/
-moz-transform:rotateX(90deg) ;
-webkit-transform:rotateX(90deg);
-o-transform: rotateX(90deg);
-ms-transform:rotateX(90deg);
transform: rotateX(90deg);
/*旋转基点--Y*/
-moz-transform-origin: top;
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top ;
}
.container:hover{
-moz-transform:rotateX(-30deg);
-webkit-transform:rotateX(-30deg);
-o-transform: rotateX(-30deg);
-ms-transform:rotateX(-30deg);
transform: rotateX(-30deg);
}
.blank{
width:39px;
height:39px;
line-height:40px;
float:left;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
background-color:#E5E5E5;
}
.blank_fill{
width:39px;
height:39px;
line-height:40px;
float:left;
4000
border-right:1px solid #000000;
border-bottom:1px solid #000000;
}
.content{
width:100%;
float:left;
border:1px solid black;
border-radius:5px;
margin-bottom:20px;
}
.color_line{
width:100%;
height:20px;
margin-top:10px;
}
.line_text_left{
width:40px;
height:40px;
line-height:40px;
text-align:left;
float:left;
}
.line_text_right{
width:40px;
height:40px;
line-height:40px;
float:left;
}
.operation_line{
width:100%;
height:55px;
text-align:center;
}
.icon{
background: url(play1.png) no-repeat; /*url为png图片的路径*/
/*width和line-height分别对应每个小图标的宽和高*/
width: 55px;
height:53px;
display: inline-block;
}
.icon-left{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -3px -67px;/*对应小图标的坐标*/
}
.icon-right{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -148px -67px;/*对应小图标的坐标*/
}
.icon-top{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -73px -3px;/*对应小图标的坐标*/
}
.icon-bottom{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -73px -140px;/*对应小图标的坐标*/
}
.icon-ok{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -73px -70px;/*对应小图标的坐标*/
}
.icon-no{ /*png图片左上角为原点,往右往下均为负值*/
background-position: -147px -3px;/*对应小图标的坐标*/
}
.button{
border:none;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="body_all">
<div class="body_left">
<div class="stage">
<div class="container-box" id="container">
<!-- back begin-->
<div class="side-back back" id="back_line">
</div>
<!-- back begin-->
<!-- right begin-->
<div class="side-right right" id="right_line">
</div>
<!-- right end-->
<!-- bottom begin-->
<div class="side-bottom bottom" id="bottom_line">
</div>
<!-- bottom end-->
</div>
</div>
</div>
<div class="body_right">
<div class="content" id="content">
</div>
<div class="content" id="console">
</div>
<div class="content" id="operation">
<div class="color_line" style="text-align:center; border-bottom:1px solid black;">显示旋转</div>
<div class="operation_line">
<input type="button" class="button icon icon-top" onclick="rotate('x',30)" >
</div>
<div class="operation_line">
<input type="button" class="button icon icon-left" onclick="rotate('z',-30)" >
<input type="button" id="contr" class="button icon icon-no" onclick="run(this)" >
<input type="button" class="button icon icon-right" onclick="rotate('z',30)" >
</div>
<div class="operation_line">
<input type="button" class="button icon icon-bottom" onclick="rotate('x',-30)" >
</div>
</div>
</div>
</div>
<script type="text/javascript" charset='utf-8'>
var degXs=0;
var degYs=0;
var timeout = false; //启动及关闭按钮
function rotate(type,degs){
timeout = true;
$("#contr").attr('class','button icon icon-no');
if(type=='z'){
degYs=(degs+degYs)%360;
}
if(type=='x'){
degXs=(degs+degXs)%360;
}
document.getElementById('container').style.transform='rotateX('+degXs+'deg) rotateY('+degYs+'deg)';
}
//var degs = 0;
function run(data){
if($(data).attr('class') =='button icon icon-no'){
$(data).attr('class','button icon icon-ok');
timeout = false;
}else{
$(data).attr('class','button icon icon-no');
timeout = true;
};
aaa();
}
var flg = false;
function aaa(){
if(timeout) return;
runy();
setTimeout(aaa,1000); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒
//setInterval (runy(), 1000);
function runy(){
//degYs+=15;
if(!flg){
degYs+=15;
if(degYs>90){
flg=true;
}
}else{
degYs-=15;
if(degYs<-90){
flg = false;
}
}
document.getElementById('container').style.transform='rotateY('+degYs+'deg) rotateX('+degXs+'deg)';
}
}
var rows,cols,lay; //行，列，层
var blank_size=40; //小方格大小
var back_bg=$('#back_line');
var right_bg=$('#right_line');
var bottom_bg= $('#bottom_line');
var container =$('#container');
var consoleCon = $('#console');
var colorarr=['#00FF00','#EEEE00','#FF7F50','#FF3030'];
var namearr=['0℃~10℃ ','10℃~20℃ ','20℃~30℃ ','30℃~50℃ '];
var data="11.0 11.1 11.2 11.3 11.4 11.5 11.6 12.0 12.1 12.2 12.3 12.4 12.5 12.6 13.0 13.1 13.2 13.3 13.4 13.5 13.6 14.0 14.1 14.2 14.3 14.4 14.5 14.6 15.0 15.1 15.2 15.3 15.4 15.5 15.6 21.0 21.1 21.2 21.3 21.4 21.5 21.6 22.0 22.1 22.2 22.3 22.4 22.5
22.6 23.0 23.1 23.2 23.3 23.4 23.5 23.6 24.0 24.1 24.2 24.3 24.4 24.5 24.6 25.0 25.1 25.2 25.3 25.4 25.5 25.6 31.0 31.1 31.2 31.3 31.4 31.5 31.6 32.0 32.1 32.2 32.3 32.4 32.5 32.6 33.0 33.1 33.2 33.3 33.4 33.5 33.6 34.0 34.1 34.2 34.3 34.4 34.5 34.6 35.0 35.1
35.2 35.3 35.4 35.5 35.6 41.0 41.1 41.2 41.3 41.4 41.5 41.6 42.0 42.1 42.2 42.3 42.4 42.5 42.6 43.0 43.1 43.2 43.3 43.4 43.5 43.6 44.0 44.1 44.2 44.3 44.4 44.5 44.6 45.0 45.1 45.2 45.3 45.4 45.5 45.6";
var arr = data.split(" ");
function drowpanel(colorarr,namearr){
var results="<div class='color_line' style='text-align:center;border-bottom:1px solid black;'>温度参照示图</div>";
for(var i=0;i<colorarr.length;i++){
results+="<div class='color_line'>";
results+="<div style='width:50%; height:20px;display:inline; float:left; text-align:right;'>"+namearr[i]+"</div>";
results+="<div style='width:30%; height:20px;background-color:"+colorarr[i]+";display:inline;float:left;'></div></div>";
}
results+="<div class='color_line'></div>";
$("#content").append(results);
}
initcontainer(5,7,4);
drowpanel(colorarr,namearr);
//初始化侧面，线条，坐标
function initcontainer(rows,cols,lay){
lay++;
var widths= cols*blank_size;
var heights = rows*blank_size;
var zHeights = lay*blank_size;
back_bg.css("height",zHeights).css("width",widths).css("line-height",zHeights);
right_bg.css("height",zHeights).css("width",heights).css("left",widths+2).css("line-height",zHeights);
bottom_bg.css("height",heights).css("width",widths).css("top",zHeights+2).css("line-height",heights);
drow_bg_blank(bottom_bg,rows*cols,widths,heights);
drow_bg_blank(right_bg,rows*lay,heights,zHeights);
drow_bg_blank(back_bg,lay*cols,widths,zHeights);
drow_bottom_x(bottom_bg,cols,widths,heights);
drow_top_x(back_bg,cols,widths,heights);
drow_bottom_y(bottom_bg,rows,widths,heights);
drow_top_y(right_bg,rows,widths,heights);
drow_right_z(right_bg,lay,zHeights,heights);
drow_left_z(back_bg,lay,zHeights,heights);
drow_data(lay,widths,heights,rows,cols);
}
//侧面线条，bg_con：容器，countblank：方格改书，divwidth：宽，divheight：高
function drow_bg_blank(bg_con,countblank,divwidth,divheight){
var results ="<div stype='width:"+divwidth+";height:"+divheight+";'>";
for(var i=0;i<countblank;i++){
results+="<div class='blank'></div>";
}
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//底部X轴
function drow_bottom_x(bg_con,cols,wid,hei){
var results ="<div style='width:"+wid+"px;height:"+blank_size+"px;position:absolute;top:"+hei+"px;left:-"+blank_size/6+"px;'>";
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_left'>";
results+=i;
results+="</div>"
}
results+="<div class='line_text_left'>X</div>"
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//顶部X轴
function drow_top_x(bg_con,cols,wid,hei){
var results ="<div style='width:"+wid+"px;height:"+blank_size+"px;position:absolute;top:-"+blank_size+"px;left:-"+blank_size/6+"px;'>";
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_left'>";
results+=i;
results+="</div>"
}
results+="<div class='line_text_left'>X</div>"
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//底部Y轴
function drow_bottom_y(bg_con,cols,wid,hei){
var results ="<div style='width:"+blank_size+"px;height:"+hei+"px;position:absolute;left:-"+blank_size+"px;top:"+blank_size/3+"px;'>";
results+="<div class='line_text_right'>Y</div>"
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_right'>";
results+=cols-2-i;
results+="</div>"
}
b864
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//顶部Y轴
function drow_top_y(bg_con,cols,wid,hei){
var results ="<div style='width:"+hei+"px;height:"+blank_size+"px;position:absolute;top:-"+blank_size+"px;left:"+blank_size/3+"px;'>";
results+="<div class='line_text_right'>Y</div>"
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_right'>";
results+=cols-2-i;
results+="</div>"
}
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//右侧Z轴
function drow_right_z(bg_con,cols,wid,hei){
var results ="<div style='width:"+blank_size+"px;height:"+wid+"px;position:absolute;left:"+hei+"px;top:"+blank_size/3+"px;'>";
results+="<div class='line_text_right'>Z</div>"
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_right'>";
results+=cols-2-i;
results+="</div>"
}
results+="</div>";
bg_con.append(results);
}
//bg_con:容器，wid：宽度，hei：高度
//右侧Z轴
function drow_left_z(bg_con,cols,wid,hei){
var results ="<div style='width:"+blank_size+"px;height:"+wid+"px;position:absolute;left:-"+blank_size+"px;top:"+blank_size/3+"px;'>";
results+="<div class='line_text_right'>Z</div>"
for(var i=0;i<cols-1;i++){
results+="<div class='line_text_right'>";
results+=cols-2-i;
results+="</div>"
}
results+="</div>";
bg_con.append(results);
}
function drow_data(lay,wid,hei,rows,cols){
var resu ="<div class='color_line' style='text-align:center;border-bottom:1px solid black;'>层显控制</div>";
for(var i=0;i<lay-1;i++){
drow_data_lay(i+1,lay-i-1,wid,hei,rows,cols);
resu+="<input type='radio' name='radioname' onclick='showdata("+(i+1)+")'>"
resu+="第 "+(i+1)+" 层<br>";
}
//输出按钮
consoleCon.append(resu);
}
//画层
function drow_data_lay(lay_h,lay,wid,hei,rows,cols){
var results="<div class='side-layer layer' id='layer_"+lay_h+"' style='height:"+hei+"px;width:"+wid+"px;line-height:"+hei+"px;top:"+lay*blank_size+"px;'>";
//results+=lay_h;
results+="<div style='height:"+hei+";,width:"+wid+";'>";
for(var i=0;i<rows*cols;i++){
var num = arr[((lay-1)*rows*cols+i)];
var colors;
if(num<=10){
colors=colorarr[0];
}else if(num>10 && num<=20){
colors=colorarr[1];
}else if(num>20 && num<=30){
colors=colorarr[2];
}else{
colors=colorarr[3];
}
results+="<div class='blank_fill' style='background-color:"+colors+"'>"+num+"</div>";
}
results+="</div>";
container.append(results)
}
function drow_data_content(results,datacount,wid,hei){
}
//控制层显示
function showdata(layid){
$('.layer').hide();
$('#layer_'+layid).show();
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Python基于matplotlib实现绘制三维图形功能示例
- 基于文档/视图模式实现网页浏览以及打印功能
- 基于vue+ bootstrap实现图片上传图片展示功能
- 基于Asterisk的VoIP开发指南——(1)实现基本呼叫功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 基于apache组织的commonNet开源组件实现ftp客户端的上传功能
- 基于角色-功能-资源的权限控制模型的设计与实现-引子
- 基于web的QQ实现代码(asp) ——在网叶(web)上实现简单QQ功能(转)
- Asp.Net MVC:基于cookie的用户自选视图引擎实现
- Asp.Net MVC:基于cookie的用户自选视图引擎实现
- 基于SVG技术实现WebGIS的基本功能（1）
- 基于掌微atlas3/atlas4方案的功能实现分析
- 基于MIDP2.0实现图片的缩放功能
- 在Access中实现类似视图的功能
- 基于单个对话框工程中，CListBox控件上实现 选择/复制功能(不要写CListBox的派生类)
- 基于AJAX技术的WebGis系统实践 (4. 三维城市地图系统功能概述)
- 基于SVG技术实现WebGIS的基本功能（2）
- 基于Asterisk的VoIP开发指南——(1)实现基本呼叫功能
- 基于AJAX技术的WebGis系统实践 (4. 三维城市地图系统功能概述)
- 在Access中实现类似视图的功能