前端网页标签百分比定位问题,利用table和img标签制作一个平面直角坐标系图形。img当箭头,table制作直角坐标系的骨架。采用百分比布局,但是一缩放img位置就乱了
<!doctype html>
Insert title here
function test(option){
var createElement = function(tag,parentTag){
if(tag!=null&tag.length!=0){
var element = document.createElement(tag);
if(parentTag!=null){
parentTag.appendChild(element);
}
return element;
}else{
return null;
}
};
var title = createElement('div',option.container);
var img1 = createElement('img',option.container);
var img2 = createElement('img',option.container);
title.style.textAlign="left";
title.style.marginBottom="28px";
var root = createElement('div',option.container);
root.style.marginTop="0px";
option.container.style.height="450px";
option.container.style.width="764px";
option.container.style.margin="auto";
title.innerHTML="图表名称:"+option.title;
var table = createElement('table',root);
table.style.width="99%";
var tbody = createElement('tbody',table);
table.style.borderCollapse='collapse';
var tds = new Array();
for(var trNum=0;trNum<3;trNum++){
var tr = createElement('tr',tbody);
for(var tdNum=0;tdNum<3;tdNum++){
var td = createElement('td',tr);
tds[tds.length] = td;
}
}
var divs = new Array();
for(var divNum=0;divNum<4;divNum++){
var div = createElement('div');
divs[divs.length] = div;
div.style.border="1px solid black";
div.style.backgrounDcolor="green";
div.style.textAlign="center";
div.style.width="80%";
div.style.height="146px";
div.style.marginLeft="31px";
div.style.lineHeight="4";
div.style.marginBottom="30px";
}
tds[0].style.paddingRight="30px";
tds[0].style.textAlign="right";
tds[0].style.borderRight="5px solid #84C0F2";
tds[0].style.width="20%";
tds[0].innerHTML="
"+option.legend[0]+"
";
var asd = document.getElementById("#asd");
tds[1].appendChild(divs[0]);
tds[1].style.width="40%";
tds[2].appendChild(divs[1]);
tds[2].style.width="40%";
tds[3].style.paddingRight="30px";
tds[3].style.textAlign="right";
tds[3].style.borderRight="5px solid #84C0F2";
tds[3].innerHTML=option.legend[1];
tds[4].appendChild(divs[2]);
tds[5].appendChild(divs[3]);
tds[8].style.overflow="hidden";
for(var td2Num=0;td2Num<2;td2Num++){
tds[td2Num+7].style.borderTop="5px solid #84C0F2";
tds[td2Num+7].style.textAlign="center";
tds[td2Num+7].style.height="68px";
tds[td2Num+7].innerHTML=option.legend[2+td2Num];
}
for(var i=0;i<divs.length;i++){
divs[i].innerHTML=option.legend[i+4]+"
"+option.data[i]+"家";
divs[i].style.backgroundColor=option.color[i];
}
root.style.overflow="hidden";
img1.src = "123.png";
img2.src = "123.png";
img1.style.position="relative";
img1.style.marginLeft="97.6%";
img1.style.marginBottom="-51%";
img1.style.height="20px";
img1.style.width="20px";
img2.style.position="relative";
img2.style.marginLeft="18.7%";
img2.style.marginBottom="-1%";
img2.style.height="20px";
img2.style.width="20px";
}
container = document.getElementById("box");
var option = {
title:"四象线图",
container:container,
legend:['高价值','低价值','低频率','高频率','体验用户','优质用户','流逝用户','潜力用户'],
data:['112','78','44','220'],
color:['#FAEBD7','#FF3333','#DDDDDD','#87CEEB']
};
test(option);