js+css 灵活层叠 绝对/相对 定位

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  


<title>测试</title>  
<style type="text/css">


 .tempDrawDiv{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}
 .retc{position:absolute; border:1px solid #CCCCCC; overflow:hidden; background:#EFEFEF}
 
  .touming{background:rgba(0,0,0,0.1) none repeat scroll !important; /*实现FF背景透明,文字不透明*/
 background:black; display:inline; filter:Alpha(opacity=10);/*实现IE背景透明     width:100px; height:100px;       */  
  color:green; font-size:18px; display:inline; font-weight:bold;}
  
  .touming2{background:rgba(0,0,0,0.1) none repeat scroll !important; /*实现FF背景透明,文字不透明*/
 background:black; display:inline; filter:Alpha(opacity=10);/*实现IE背景透明     width:100px; height:100px;       */  
  color:green; font-size:12px; display:inline; font-weight:bold;}
  
  .touming p{ position:relative;display:inline;}/*实现IE文字不透明*/
  
  body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
  html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}
  


 
</style>
</head>  
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body >  


 
 <div style="height:100px;width:99%;border:3px solid #000;position:absolute;text-align:center;">
         标&nbsp;题&nbsp;标&nbsp;题&nbsp;标&nbsp;题&nbsp;标&nbsp;题&nbsp;标&nbsp;题&nbsp;标&nbsp;题&nbsp;标&nbsp;题&nbsp;标&nbsp;题
 </div>
 <div style="height:80%;width:90%;position:absolute;margin-top:102px;">
 <div style="height:100%;width:20%;border:3px solid #000;position:absolute;text-align:center;">
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
      联动菜单&nbsp;<br>
 </div>
 <div id="qwe" style="height:100%;width:89%;border:3px solid red;position:absolute;margin-left:20.2%;">  
      <div style="float:left;"> 
    <input id="ggg" type="button"  value="开始填充图片" οnclick="ggg();" >
    <input id="xxx" type="button"  disabled=true value="结束" οnclick="xxx();" >
    <font color="red">(结束后可双击销毁不需要的填充图片)</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="" type="button"  value="坐标成图" οnclick="zuoBiao();" >
        
            <span id="qqq"></span>
     </div> 
      
  <table id="tempTable" width="778"  border="0" align="left" cellpadding="0" cellspacing="0"  >
  <tr >
    <td >
     <span id="autoClickOne" style="background-color:red;height:0.1;width:0.1;float:left;" οnclick="GetControlPosition(this);" ></span>
    </td>
  </tr>
  <tr>
    <td align="left">
      <span id="div222" style="height:254;width:300;text-align:left;" >
         <img id="img" οnclick="" src="image/xiangmutu.jpg" style="text-align:left;" width="998" height="600" border="1"  />
      </span> 
    </td>
  </tr>
  <tr>
    <td  >
      <span id="autoClickTwo" style="background-color:red;height:0.1;width:0.1;float:right;" οnclick="GetControlPosition2(this);"></span>
    </td>
  </tr>
  </table>
  </div>
   <div style=" height:100%;width:10%;border:3px solid red;position:absolute;margin-left:99%; ">
   
      <input type="hidden" id="haha" >
      <input type="hidden" id="hehe" >
     
        将下面数字输入对应图片中! &nbsp;&nbsp;&nbsp; <input type="button" value="提交提交提交提交" οnclick="submitImage();" >
   
       <br><br><br>
      <font color="blue">  1 : 冷水泵 </font> <br>
      <font color="red">  2 : 热水泵 </font> <br>
      <font color="green">  3 : 放心泵 </font> <br>
      <font color="black">  4 : 离心泵 </font> <br>
      
       <div class="touming" >
            <p> 哈哈 </p>
       </div>
      
  </div>
    </div>
   
  
  
  
<script language="javascript" type="text/javascript">  


    var tempObjArr = {1:"冷水泵 ",2:"热水泵 ",3:"开水泵 ",4:"离心泵 "};
    var wId = "storeDiv";
var index = 0;
var tempIndex = 0;
var startX = 0 , startY = 0;
var tempStartX = 0, tempStartY = 0;
var endX = 0 , endY = 0 ;
var tempEndX = 0, tempEndY = 0;
var flagMove = false;
var tempGggOrXxxFlag = 0 ;
var retcLeft = "0px", retcTop = "0px", retcHeight = "0px", retcWidth = "0px";
var overWidth = "0", overHeight = "0" ;
var firstOne = null ;
    var lastOne = null ;
    
    
    
 //   var div = $("<div id="+(wId)+" class='tempPlotRetc' style='position:absolute;float:left;margin-left:"+startX+"px;margin-top:"+(startY-(currentTableHeight+100))+"px;width:200; height:30; '>"+
// "<input type='text' style='display:none;' value="+(startX)+","+(startY-(currentTableHeight+100))+","+(startX+200)+","+(startY-(currentTableHeight+100)+30)+" >"+
// "<input type='text' style='display:none;' onKeyUp='bdText(this,1);' value=''><span id='bd'></span>"+
// "</div>");
    

function ggg(){   
//    alert(  $("#xxx").attr("value","  2 ") ); 
//       $("#xxx").attr("disabled"," ") ; 
//      $("#ggg").attr("disabled","disabled"); 
       
       document.getElementById('ggg').disabled=true ;
         document.getElementById('xxx').disabled=false ; 
     
   document.onmousedown = function(e){   
   var evt = window.event || e;
        var target = e.target || e.srcElement;
   if(target.id == 'xxx') {
            document.onmousemove = null ;
            document.onmouseup = null ;
            document.onmousedown = null ;
            tempGggOrXxxFlag = 0 ;
            return;
        }
        
        if(target.id == 'ggg') {   
  //          $("#ggg").css("disabled",true);
  //          $("#xxx").css("disabled",false);  
            
              return ;  
        }
   //      if(tempGggOrXxxFlag == 1)  return;
        
       
           
tempGggOrXxxFlag = 1 ;
try{
var evt = window.event || e;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
startX = evt.clientX + scrollLeft;   tempStartX = evt.clientX + scrollLeft;     
startY = evt.clientY + scrollTop;    tempStartY = evt.clientY + scrollTop;
// alert( startX +","+startY + "    " + firstOne[0]+"-"+(firstOne[1])+"-"+lastOne[0]+"-"+(lastOne[1]) );          return ;
           if( startX > lastOne[0] || startX < firstOne[0] || startY > lastOne[1] || startY < firstOne[1] ){
                alert("请在项目图片中选择开始位置!"); return ;
           }
index++;
flagMove = true;
var div = $("<div id="+(wId+index)+" class='tempDrawDiv' style='float:left;margin-left:"+startX+"px;margin-top:"+startY+"px;'></div>");
div.appendTo($("body"));         
}catch(e){
//alert(e);

document.onmouseup = function(){     
try{         
if( tempIndex == 3 ){
   endX = tempStartX ;
   endY = tempStartY + overHeight ;
                startX = tempStartX - overWidth ;
                startY = tempStartY ;
}else if( tempIndex == 1 ){
    startX = tempStartX ; 
                startY = tempStartY - overHeight ;
                endX = tempStartX + overWidth ;
   endY = tempStartY ;
}else if( tempIndex == 2 ){
   startX = tempStartX - overWidth ; 
                startY = tempStartY - overHeight ;
                endX = tempStartX ;
   endY = tempStartY ;
}else if( tempIndex == 4 ){
   startX = tempStartX ; 
                startY = tempStartY ;
                endX = tempEndX ;
                endY = tempEndY;
}
// alert( overWidth + "  -  " + overHeight + "  -  " + retcLeft + "  -  " + retcTop );
document.body.removeChild( document.getElementById( wId + index ) );
if( (overWidth)<80 || (overHeight)<80 || (retcLeft)<80 || (retcTop)<80 || (endY-startY)<80 || (endX-startX)<80 ){  
   overWidth = 0 , overHeight = 0 ;
   startX = 0 ; startY = 0 ; endX = 0 ; endY = 0 ;
    tempStartX = 0 ; tempStartY = 0 ; tempEndX = 0 ; tempEndY = 0 ;
     retcLeft = 0; retcTop = 0; retcHeight = 0; retcWidth = 0;
        return ;
 }
       var div = $("<div  id="+( wId )+" class='retc' style=' float:left; position:absolute; margin-left: "+(retcLeft-8)+"; margin-top: "+(retcTop-8)+"; width: "+retcWidth+"; height: "+retcHeight+"'  ><input type='text' style='display:none;' value="+(startX-firstOne[0])+","+(startY-firstOne[1])+","+(endX-firstOne[0])+","+(endY-firstOne[1])+" <br><input type='text' style='display:none;' onKeyUp='bdText(this,1);' value=''><span id="+( "bd" + index )+"></div>");  //  onKeyUp='bdText(this,1);'
div.appendTo($("body"));   
overWidth = 0, overHeight = 0 ;
// $("#haha").attr( "value" , firstOne[0] + "," + firstOne[1]  );
// $("#haha").attr( "value" , retcLeft + "," + retcTop + "," + ( overWidth + retcLeft ) + "," + ( retcTop + overHeight ) );
//        alert( endX + "  -  " + endY );
}catch(e){  
//alert(e);
}
// alert( startX + "  -  " + startY + "  -  " + endY + "  -  " + endY  );

$("#qqq").text(startX+","+startY+","+endX+","+endY); 
flagMove = false;
}
document.onmousemove = function(e){ 
if(flagMove){
try{
var evt = window.event || e;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
retcLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX)  ;
retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY)  ;
retcHeight = Math.abs(startY - evt.clientY - scrollTop) + "px";
retcWidth = Math.abs(startX - evt.clientX - scrollLeft) + "px";     
   overHeight = Math.abs(startY - evt.clientY - scrollTop) ;
overWidth = Math.abs(startX - evt.clientX - scrollLeft) ;
endX = overWidth + retcLeft ;
endY = retcTop + overHeight ;
tempEndX = overWidth + retcLeft ;
tempEndY = retcTop + overHeight ;  
 
 if( tempStartX == endX && tempStartY != endY ){
        if( ( tempStartX - overWidth ) < firstOne[0] || ( tempStartY + overHeight ) > lastOne[1] ){
                restoreMove(); return ;
        }else{
          tempIndex = 3 ;
        }   
          }else if( tempStartX != endX && tempStartY == endY ){
              if( ( tempStartX + overWidth ) > lastOne[0] || ( tempStartY - overHeight ) < firstOne[1] ){
                restoreMove(); return ;
         }else{
           tempIndex = 1 ;
                
 }  
          }else if( tempStartX == endX && tempStartY == endY ){
             if( ( endX - overWidth ) < firstOne[0] || ( endY - overHeight ) < firstOne[1] ){
                restoreMove(); return ;
        }else{
           tempIndex = 2 ;
                
}  
          }else if( tempStartX < endX && tempStartY < endY ){
              if( endX > lastOne[0] || endY > lastOne[1] ){
                restoreMove(); return ;
        }else{
            tempIndex = 4 ;
                
}  
          }else{
                return ;
          }
      
     //    if( endX > lastOne[0] || endY < firstOne[1] || endX < firstOne[0] || endY > lastOne[1] || startX < firstOne[0] || startX > lastOne[0]|| startY < firstOne[1] || startY > lastOne[1] ){
     
     //      }
       
            $("#storeDiv"+index).css("width",retcWidth);   
            $("#storeDiv"+index).css("height",retcHeight);
            $("#storeDiv"+index).css("margin-left",retcLeft);
            $("#storeDiv"+index).css("margin-top",retcTop);      
            
}catch(e){
//alert(e);
}
}
}
}
  }
  
  function submitImage(){
     var zuobiaoString = "";
     var valueString = "";
     var valueAndZuoBiao = new Array() ;
       $("div[id^=storeDiv]").each(function(i){
             $(this).find("input").each(function(q){  
                  if(q==0){
                      valueAndZuoBiao[i] = $(this).attr("value") ;
                  } 
                  if(q==1){
                      if( $(this).val() == "" ){
                           valueAndZuoBiao[i] = 0 + "," + valueAndZuoBiao[i] ; 
                      }else{
                           valueAndZuoBiao[i] = $(this).val() + "," + valueAndZuoBiao[i] ;
                      }     
                  }   
  //                   if(q==0){
 //                        if($(this).next().val()==""){
 //                             return ;
  //                       }
 //                        zuobiaoString += $(this).attr("value")+"," ;
 //                    }
 //                    if(q==1){
 //                        if($(this).prev().val()==""){
  //                              return ;
//                         }
  //                          valueString += $(this).val()+"," ;
 //                    }
            
             });
       });
      $("div[id^=storeDiv]").each(function(i){   $(this).remove()   });
     var valueStringArr = valueString.split(",");      var zuobiaoStringArr = zuobiaoString.split(","); 
  //       alert( valueString );
     for(var ooooo in valueAndZuoBiao ){     //    alert( ooooo );
          var tempValue = valueAndZuoBiao[ooooo].split(",");
         var tempHeight = 0 ;      
           var tempTempValue2 = tempValue[2] ;
           var tempTempNum = 1 ;
    $.ajax({
       type: 'POST',
       url: 'createImage' ,
       data: {meterNum:valueAndZuoBiao[ooooo]} ,
       dataType: 'json' ,
       async : false ,
       success: function(datas){
       var div = null ;     //    alert( tempTempValue2 );
         for( var tempData in datas ){          
     //         alert( tempData + " - " + datas[tempData] );
       if(tempTempNum==1){
       div = $("<span class='touming' style=' display:inline;position:absolute;margin-left:"+(parseInt(firstOne[0])+parseInt(tempValue[1]))+"px;margin-top:"+(parseInt(firstOne[1])+parseInt(tempValue[2])+tempHeight)+"px;'>"
       +"<p>"+datas[tempData]+"</p></span>"); 
       tempHeight+=21;
       }else{
       div = $("<span class='touming2' style=' display:inline;position:absolute;margin-left:"+(parseInt(firstOne[0])+parseInt(tempValue[1]))+"px;margin-top:"+(parseInt(firstOne[1])+parseInt(tempValue[2])+tempHeight)+"px;'>"
       +"<p>"+datas[tempData]+"</p></span>"); 
       tempHeight+=14;
       }
              div.appendTo($("body"));
               tempTempNum++;
         }     
       
 
              
       }
    });    
          
 //      var div = $("<span class='retc' style='position:absolute;margin-left:"+(parseInt(firstOne[0])+parseInt(tempValue[1]))+"px;margin-top:"+(parseInt(firstOne[1])+parseInt(tempValue[2]))+"px;width:"+(parseInt(tempValue[3])-parseInt(tempValue[1]))+";height:"+(parseInt(tempValue[4])-parseInt(tempValue[2]))+";'><img src='createImage?meterNum="+(valueAndZuoBiao[ooooo])+"' width="+(parseInt(tempValue[3])-parseInt(tempValue[1]))+" height="+(parseInt(tempValue[4])-parseInt(tempValue[2]))+" /></span>");  
 //   div.appendTo($("body"));    
     }
       
       
  //   var div = $("<span id="+("sub"+index)+"  class='retc' style='position:absolute;margin-left:"+(parseInt(firstOne[0])+338)+"px;margin-top:"+(parseInt(firstOne[1])+171)+"px;width:114;height:49;'><img src='createImage?dd="+new Date()+"' width='114' height='49' border='1' /></span>");  
// div.appendTo($("body"));     
       return ;
   $.ajax({
       type: 'POST',
       url: url ,
       data: data ,
       dataType: dataType ,
       success: function(data){
              
       }
    });
          
   }
  
  function zuoBiao(){       //  alert( firstOne[0] ); return ;     
        var div = $("<span id="+("sub"+index)+"  class='retc' style='position:absolute;margin-left:"+(parseInt(firstOne[0])+338)+"px;margin-top:"+(parseInt(firstOne[1])+171)+"px;width:114;height:49;'><img src='createImage?dd="+new Date()+"' width='114' height='49' border='1' /></span>");  // createImage
// var div = $("<img src='createImage' style='position:absolute;margin-left:"+(parseInt(firstOne[0])+338)+"px;margin-top:"+(parseInt(firstOne[1])+171)+"px;' width='114' height='49' border='1' />");  // createImage  image/test.jpg
div.appendTo($("body"));      
  }
  
  function restoreMove(){
        flagMove = false;
//      document.body.removeChild( document.getElementById( wId + index );
              $("#storeDiv"+index).remove();
              retcLeft = 0 ; retcTop = 0 ;
              retcHeight = 0 ; retcWidth = 0 ;
              alert("请在项目图片中移动结束位置!"); return ;
  }
  
  function xxx(){     //       alert( $("#xxx").offsetLeft );
      document.onmousemove = null ;
            document.onmouseup = null ;
            document.onmousedown = null ;
         document.getElementById('ggg').disabled=false;
         document.getElementById('xxx').disabled=true ; 
  //         $("#ggg").attr("disabled",""); 
  //          $("#xxx").attr("disabled","disabled"); 
         $("div[id^=storeDiv]").each(function(i){   
               $(this).find("input").each(function(q){  
                       $(this).css("display","");
               });
         });
  }
 
    function bdText(obj,num){    
       $(obj).next().text("");
       $(obj).next().append( tempObjArr[1] );
}

function removeThisElement(obj){    
    $(obj).remove();
}
        
     function GetControlPosition(object) {  
     
           var pp = document.getElementById('autoClickOne').getBoundingClientRect() ; 
             firstOne = (Math.round(pp.left)+","+Math.round(pp.top)).split(",") ; 
           
   //            $(object).attr("value",Math.round(pp.left)+","+Math.round(pp.top));        
//             alert(Math.round(pp.left)+","+Math.round(pp.top));
 //    alert( document.getElementById('autoClickOne').getBoundingClientRect().left + "-" + document.getElementById('autoClickOne').getBoundingClientRect().top );
  //           var pp = GetScreenPosition(object);
     }
     
      function GetControlPosition2(object) {  
      
   //        alert( document.getElementById('autoClickTwo').getBoundingClientRect().left + "-" + document.getElementById('autoClickTwo').getBoundingClientRect().top );
        
         var pp = document.getElementById('autoClickTwo').getBoundingClientRect() ;
         lastOne = (Math.round(pp.left)+","+Math.round(pp.top)).split(",") ;
          
 //           $(object).attr("value",Math.round(pp.left)+","+Math.round(pp.top));
 //           alert(Math.round(pp.left)+","+Math.round(pp.top));
      }
      
    $("#autoClickOne").trigger("click");
    $("#autoClickTwo").trigger("click");
         
</script>  
</body>  

</html>  



public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
// OutputStream out = response.getOutputStream(); 

String meterNum = request.getParameter("meterNum");    
String[] meterNumArr = meterNum.split(",");
int width = Integer.parseInt( meterNumArr[3] ) - Integer.parseInt( meterNumArr[1] ) ;   
    int height = Integer.parseInt( meterNumArr[4] ) - Integer.parseInt( meterNumArr[2] ) ; 
    String name = null ;
    String s1 = null ;
    String s2 = null ;   System.out.println( meterNum );
    
    JSONObject json = new JSONObject();
    Writer out = response.getWriter(); 
    
     if(meterNumArr[0].equals("1")){
     name = "冷水泵" ;
     s1 = "冷水电量sssssssssssssssssss : 20" ;
     s2 = "冷水电能ddd : 22" ;
     json.put("pumpName", "冷水泵");
     json.put("冷水电量", "冷水电量sssssssssssssssssss : 20");
     json.put("冷水电能", "冷水电能ddd : 22");
     }else if(meterNumArr[0].equals("2")){
     name = "热水泵";
     s1 = "热水扬程qqqqqqq : 10" ;
     s2 = "热水压力 : 17" ;
     json.put("pumpName", "热水泵");
     json.put("热水扬程", "热水扬程qqqqqqq : 10");
     json.put("热水压力", "热水压力 : 17");
     }else if(meterNumArr[0].equals("3")){
     name = "放心泵";
     s1 = "放心压强qqq : 80" ;
     s2 = "放心振动w : 88" ;
     json.put("pumpName", "放心泵");
     json.put("放心压强", "放心压强qqq : 80");
     json.put("放心振动", "放心振动w : 88");
     }else if(meterNumArr[0].equals("4")){
     name = "离心泵";
     s1 = "离心阀值hhhh : 90" ;
     s2 = "离心力123 : 95" ;
     json.put("pumpName", "离心泵");
     json.put("离心阀值", "离心阀值hhhh : 90");
     json.put("离心力", "离心力123 : 92");
     }else{
     name = "未知";
     s1 = "未知" ;
     s2 = "未知" ;
     json.put("pumpName", "哈哈,呵呵, 没有这个水泵 ! ");
     }
     out.write(json.toString());
      
//        ImageIO.write( bi , "png", out ); 
//        out.flush();
//        out.close();
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值