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

最新推荐文章于 2022-11-21 22:51:15 发布

2542424524

最新推荐文章于 2022-11-21 22:51:15 发布

阅读量705

点赞数

分类专栏： js+css

本文链接：https://blog.csdn.net/a8263664/article/details/51242115

版权

js+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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="开始填充图片" οnclick="ggg();" >
<input id="xxx" type="button" disabled=true value="结束" οnclick="xxx();" >
<font color="red">(结束后可双击销毁不需要的填充图片)</font>         
<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" >

将下面数字输入对应图片中!     <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();
}

2542424524

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+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; ba
复制链接

扫一扫