js+css 灵活层叠 绝对/相对 定位
2016-04-25 14:37
561 查看
<!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;">
标 题 标 题 标 题 标 题 标 题 标 题 标 题 标 题
</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;">
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <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="开始填充图片" onclick="ggg();" >
<input id="xxx" type="button" disabled=true value="结束" onclick="xxx();" >
<font color="red">(结束后可双击销毁不需要的填充图片)</font>
<input id="" type="button" value="坐标成图" onclick="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;" onclick="GetControlPosition(this);" ></span>
</td>
</tr>
<tr>
<td align="left">
<span id="div222" style="height:254;width:300;text-align:left;" >
<img id="img" onclick="" 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;" onclick="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" >
将下面数字输入对应图片中! <input type="button" value="提交提交提交提交" onclick="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();
}
<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;">
标 题 标 题 标 题 标 题 标 题 标 题 标 题 标 题
</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;">
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <br>
联动菜单 <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="开始填充图片" onclick="ggg();" >
<input id="xxx" type="button" disabled=true value="结束" onclick="xxx();" >
<font color="red">(结束后可双击销毁不需要的填充图片)</font>
<input id="" type="button" value="坐标成图" onclick="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;" onclick="GetControlPosition(this);" ></span>
</td>
</tr>
<tr>
<td align="left">
<span id="div222" style="height:254;width:300;text-align:left;" >
<img id="img" onclick="" 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;" onclick="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" >
将下面数字输入对应图片中! <input type="button" value="提交提交提交提交" onclick="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();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css奇技淫巧之—多列等高
- css 使用变量
- CSS盒模型
- CSS3D变换/立方体旋转效果
- 纯CSS3代码实现文字描边
- Reset大全
- CSS3的flexbox布局
- DOM之重新介绍CSS的定位
- jq中的css-Dom
- jq js css3 实现瀑布流
- 类似QQ空间中回复列表的样式 "小明 回复 小红"
- CSS3 初步学习
- CSS代码还原脚本
- Normalize.css 与传统的 CSS Reset 有哪些区别？
- css filter滤镜实例分析
- 20160425css开发
- CSS布局之水平垂直居中
- 20160422 css 字体大小设置
- css中标签权值是如何定义的
- 慕课网HTML+CSS课程笔记