a675576674 2016-10-11 11:26 采纳率: 0%
浏览 1042

前端网页标签百分比定位问题,利用table和img标签制作一个平面直角坐标系图形。

前端网页标签百分比定位问题,利用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);

  • 写回答

1条回答

  • devmiao 2016-10-11 11:43
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀